Border and Radius and Shadow Section

The Border section is divided into three subsections:

• General
• Radius & Shadow
• Border Hover Color

The device icon appears at the top of the Border section, so you can adjust all of the border settings responsively for large, medium, and small devices. If you don’t add settings for each device size, the settings for the desktop apply to all sizes.

General

• The General button has fields for the style of border, the color, and the width of the line, set in pixels.
• If you want all the width values to be the same, set a width for one edge and click the Link icon next to the Width label to populate all of the fields. The Link icon is a toggle, which means it will keep all of the Width values in synch until you click the icon again.

Radius and Shadow

• The Radius setting rounds the corners of the border box area to round the corners of either the border line, if you set one, or the edges of a row, column, or module background.
• When you click any of the Radius value fields, a slider appears to quickly adjust the value. You can make all four corners the same value by clicking the Link icon. In the following animation, the slider is used to set the radius that rounds the upper left corner, then the Link icon is clicked to add the same setting to all four corners.
• The Box shadow effect also works with sliders. Moving the X slider to the left adds a background shadow to the left, and moving it to the right adds a shadow to the right. You can also add blur to make it more shadow-like, and increase the spread to change the size of the shadow.

Border Hover Color

• The border hover color is an optional feature you can apply to your border if you want to show a different color when the mouse hovers over the item.