What Is Border Radius?
Border radius controls how rounded the corners of an element appear. This includes images, sections, and columns.
Increasing the border radius creates softer, rounded corners. A higher value creates a more circular appearance.
For example:
0px = square corners
20–40px = slightly rounded corners
100px = fully rounded image (circle if the image is square)
Change the Border Radius of an Image
Follow these steps to round the corners of an image.
Click the image in the editor.
Open the Image Attributes panel.
Locate Border Radius.
Enter a pixel value to control how rounded the corners appear.
Higher numbers create more rounded corners.
Example
100px border radius creates a circular image if the image dimensions are equal.
Change the Border Radius of Sections and Columns
Sections and columns can also use border radius.
Follow these steps:
Click the section or column you want to edit.
Open the Border settings panel.
Locate Border Radius.
Increase the value to round the corners.
Section Border Radius
Apply border radius to a section to round the corners of the entire section container.
Column Border Radius
Apply border radius to a column to round only the column container inside a section.
Add Border Radius to a Button
You can also round the corners of buttons.
Follow these steps:
Add a Button block to your layout.
Click the button in the editor.
Locate Border Radius.
Increase the value to round the corners.
Email Client Compatibility
Some email clients may not support border radius.
Email Client | Support |
Most modern email clients | Supported |
Microsoft Outlook | May not support border radius |
⚠️ Note: Microsoft Outlook may display square corners even when a border radius is applied.
Best Practices
Use small values (8–20px) for subtle rounding.
Use larger values (40px+) for card-style layouts.
Use 100px for circular profile images.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.