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


    • Popular Articles

    • How to Create an App for Restaurants (with or without Delivery)

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

    • APPS: Radio

      The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...

    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

    • APPS: Audio & Music

      How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...

    • QR Promotions

      This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...

    • Related Articles

    • Using Divi Transform Options

      Divi transformation options are a set of powerful tools that allow you to manipulate web design in surprising ways, creating depth and attractive visual effects. Divi transformation options allow you to move elements, scale them, rotate them into ...

    • Using Sizing Options in Divi

      Divi Size Options make it easy to adjust the size of sections, rows, columns and modules in Divi. Divi Size Options make adjusting the size of sections, rows, columns and modules simple. Size is an essential part of creating attractive websites. ...

    • Using Spacing Options in Divi

      It is easy to customize spacing into sections, rows and modules with Divi Spacing Options. Spacing is an important element in web design. It helps organize your content and keep things clear and balanced. With Divi, it is easy to customize spacing in ...

    • Using Hover Options in Divi

      Las Opciones de Hover en Divi están disponibles para cualquier contenido o elemento que agregues a una página en Divi. Puedes añadir efectos al pasar el cursor sobre textos, íconos, enlaces, imágenes y más dentro de un módulo. También puedes aplicar ...

    • Divi Sticky Options

      Introducing the most comprehensive sticky system in any WordPress page builder TheDivi Sticky Optionsare a new feature that allows you to fix any item at the top and/or bottom of the browser window as you scroll up or down the page. This allows you ...