With Divi Border Options, creating truly unique designs for your website is possible. You can apply custom borders to Divi's elements, including sections, rows, and modules!
There are several border styles available and even the option to round the corners of the border.
Border Style Examples
Here are a few examples of what's possible with border styling.
Example 1:
In this example, you can see that the corners of the row are rounded.
Example 2:
In this example, we've achieved the look of mobile device mockups by rounding the corners of these modules.
Example 3
In this example, we've added some fun border styling to each service.
The top borders are gray with one rounded corner, and the bottom border is yellow with rounded corners.
It's a unique way to distinguish between elements while also highlighting them.
How to Access Border Styles
The Border settings group is available within all Sections, Rows, Columns, and Modules.
Open the element's modal settings Window by clicking on the gear icon
Go to Design → Border.
All Divi Border Options and Settings Explained
Let's dive into each setting and explore what's possible with Divi's Border Options.
Rounded Corners
You can create rounded borders by adjusting the border radius of all four corners. The radius value can be set as follows:
Collectively - by clicking the chainlink icon to link the corners.
Individually - by clicking the chainlink icon to unlink the corners.
Border Styles
Add a border to all sides or individual sides. Tab through each option to choose which side(s) you want to have a border.
Border Width
To adjust the border width (the border's thickness), type a numerical value in the input field or drag the range slider to increase and decrease the border's thickness.
Border Color
Choose a color from your site's color palette, or use the eyedropper icon to find a new color to set the border color. Drag and drop the color picker or paste a CSS hex code of your desired color.
You can also choose from:
Saved Colors
Global Colors
Recent Colors by clicking on those links beneath the color palette.
To learn all about the Divi Color Management System, click here.
Border Style
There are 9 border styles to choose from. Below are examples of each. To select a style, click it from the dropdown menu.
You can even get creative by styling borders individually with unique border styles to create truly stunning designs.
You can add borders to one edge, two edges, three edges, or four and adjust each edge's styles individually.
Tips & Best Practices for Using Divi Border Options
When using Divi Border Options, remember these tips and best practices!
Get Creative
The styling options are endless with Divi's Border Options!
This example shows how you can create stunning hero sections with Border Options. Learn how to create this design here.
Create an image border effect like the example above! Learn how to achieve this here.
Or you can create animated border overlaps to highlight content on your website! Learn how to do this here.