Update : I had written this blog post a very long time back when DIVI did not have options for adding borders to rows. Now DIVI has the UI option to add row borders in their design tab . Go To Row Settings – Design – Borders and choose the type of border styles, color, width with a click of a mouse. You no longer need CSS to add this. I am keeping this post in case anyone still wants to use CSS to control the borders. Sometimes CSS gives you a lot more power and design options, if you know it well.

Original Post:

Lets add a border to a row in Divi. For this example I have added custom css to the row module. This will style the row container that holds its columns and modules. I’ve added a simple border and some custom padding to add a nice box around the contents of the row. This tip was a CSS tip by Elegant Themes that I had read.

Row Settings -> Custom CSS –> Main Element
border: 3px solid #74c403;
padding: 20px;

This tip was featured on Elegant Themes blog.
Elegant Themes Tips

Adding Border to Row in DIVI

2 Comments

  1. miles hirson

    well where do we put the damn CSS code

    Reply
    • Girish Dadlani

      Hi Miles, Go to any Row – Click on the settings. This will bring up the row module settings. Click on the Advanced Tab. Under that you will find a box called Main Element. Copy the css code over there and it should work.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

I would love to hear about how I can help your business website. I have specialized in using the DIVI theme from Elegant Themes since the past five years. If you would like to see the projects that I have completed as a DIVI Designer, please do have a look at my portfolio. Please contact me and I will get back to you immediately.

Share This