Set borders and border effects in rows, columns, and modules
- Available in: Beaver Builder 2.2
- Applies to: All rows and columns, a subset of modules
Rows, columns, and some modules have a uniform Border section with enhanced settings to configure responsive borders and border effects, as shown in the following screenshot and described below.
The device icon now 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 will apply to all.
Within the Border section, there are two buttons that expand, as described in the following sections.
The General subsection has the following settings, shown in this screenshot and described below:
The General button has fields for the type 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 & Shadow
The Radius & Shadow settings are new effects in Beaver Builder 2.2.
Tip: Radius and shadow effects apply whether or not a border line has been set in the General section.
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.
Note: 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.