The Border section appears on the settings panel for rows, columns, and some tools, allowing you to set a border and adjust its settings:

The Border section has the following subsections:

• General
• Radius & Shadow

GENERAL SECTION

The General subsection lets you set a border style, color, and width:

• Style: Set a style for your border, selecting from: Default, None, Solid, Dashed, Dotted, Double.
• Color: Use the color dropper to select a color for your border.
• Width: Set a width for your border, in pixels. You may click the Link Values setting to lock and unlock your border spacing settings:

When locked (as indicated by a blue icon), any entered value will automatically be applied to all four settings (top, right, bottom, left). When unlocked (as indicated by the gray icon), you will need to enter values for all four settings manually.

The Radius & Shadow section lets you set a radius—which rounds the corners of either the border line (if one has been set), or the edges of a row, column, or tool background—and a box shadow, which adds a shadow to your border:

Radius and shadow effects apply whether or not a border line has been set in the General section.

You can add rounded corners to row/column backgrounds, borders and even photos using the Radius setting, as in the example below, which features a rounded column with a rounded callout image:

When adding images to some of the a callout page element, you can add other effects, such as cropping into circle or square shapes. Look for the Crop setting to adjust this. For example, in the Callout tool, this setting is on the Photo Style section of the Image tab.

To set a uniform radius for all four settings (top left, top right, bottom left, and bottom right), click the Link Values setting, then type or use the slider to select your radius value:

Below is an example of a 10px radius (note the curved edges):

To add a box shadow, use the color dropper to select a color for your shadow:

Control the direction of offset using the X field to move your shadow horizontally to the right or left, or the Y field to move your shadow vertically:

Here is an example of the box shadow with an offset of -9 (for the horizontal X field) and 8 (for the vertical Y field):

The Blur field moves the shadow to the right and distorts it so that the background shape is no longer distinctive:

Here is an example of the box shadow with a blur of 15px:

You can also change the size of the shadow using the Spread field:

Here is an example of the box shadow with a spread of 13px:

Box shadows extend outside the row width. This means that for full-width rows with margins set to 0, the shadow will extend outside of the browser window.

BORDER SETTINGS AND DEVICE SIZE

From the Border section, you can also define your border settings for different devices using the device icon:

Simply click this icon to shift to a tablet/iPad screen size and add your border settings (the icon will change, and you will see the Page Canvas resize to reflect a tablet screen):

Click the device icon again to repeat this process for phone screens:

If you’d prefer not to specify settings for each device size, the general settings defined for the desktop will apply to all device sizes.

If no further changes are needed, click SAVE to save your changes or CANCEL to close without saving. Otherwise, you may proceed with any additional adjustments.