Using Border Options in Divi | Scoreapps

Using Border Options in Divi

Divi border options allow you to easily add and stylize edges on any item on the page.


With Divi Edge Options, it is possible to create truly unique designs for your website. You can apply custom edges to Divi elements, including sections, rows, and modules!

There are several edge styles available and even the option of rounding the corners of the edge.


Border Style Examples

Edge Style Examples

Here are some examples of what is possible with the edge style.

Example 1:

In this example, you can see that the corners of the row are rounded.
Divi Border Options example 1

Example 2:

In this example, we have achieved the look of models of mobile devices by rounding the corners of these modules.
Mobile App Mockup using Divi Border Options

Example 3:

In this example, we have added a fun edge style to each service.

The upper edges are gray with a rounded corner, and the lower edge is yellow with rounded corners.

It is a unique way to differentiate elements while highlighting them.


Services section using Divi Border Options


How to access edge styles

The edge configurations group is available in all sections, rows, columns and modules.
  • Open the item settings pop-up window by clicking the gear icon.

  • Go to the tabDesign → Edge.


How to access Divi Border Options

All Divi Edge Options and Settings


Let us go deeper into each configuration and explore what is possible with the Divi Edge Options.

Rounded corners

You can create rounded edges by adjusting the radius of the four corners. The value of the radius can be configured as follows:
  • Collectively: by clicking on the link icon to link the corners.

  • Individual: by clicking on the link icon to unlink the corners.

Rounded Corners


Edge styles

Add an edge on all sides or individual sides. Change tab to choose which side(s) you want it to have an edge.

Border styles with Divi Border Options

Edge width

To adjust the edge width (the edge thickness), type a numerical value into the input field or drag the slider to increase or decrease the edge thickness.
Border Width

Edge color

Choose a color from your site's color palette, or use the dropper icon to find a new color to set as an edge color. Drag the color selector or paste a hexadecimal code from the desired color.

You can also choose between:

  • Saved colors

  • Global colors

  • Recent colorsby clicking on those links below the color palette.

To learn everything about the Divi Color Management System, click here.

Border Color

Edge style

There are 9 edge styles to choose from. Examples of each are shown below. To select a style, click it from the drop-down menu.
Border Style Options

You can even be creative by applying unique edge styles individually to each edge to create really shocking designs.

You can add edges on one side, on two sides, three sides or four, and adjust the style of each edge separately.

Solid border style in Divi Border Options
Dashed border in Divi Border Options
Double border in Divi Border Options
Groove border in Divi Border Options
Ridge border in Divi Border Options
Insert border in Divi Border Options
Outset border in Divi Border Options
None border in Divi Border Options

Tips and Best Practices for Using Divi Edge Options

When using the Divi Edge Options, remember these tips and best practices:

Be creative

Style options are endless with Divi Edge Options!
Creative borders with Divi Border Options

This example shows how you can create impressive main sections with the Edge Options. Learn how to create this design here.

Hero sections with Divi Border Options

Create an edge effect for images such as the example above. Learn how to do it here.

Or you can also create animated edge overlays to highlight content on your website. Learn how to do it here.


Continue learning

  • See examples of edge styles

  • How to creatively use Divi row edges to create an impressive main section

  • Use low-inx module edges as funds with Divi

  • How to create animated edge overlays to highlight content with Divi