{"id":825881,"date":"2017-12-17T16:00:00","date_gmt":"2017-12-17T16:00:00","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-use-divis-new-border-style-options-on-your-website-part-2\/"},"modified":"2022-12-10T13:49:32","modified_gmt":"2022-12-10T13:49:32","slug":"how-to-use-divis-new-border-style-options-on-your-website-part-2-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-use-divis-new-border-style-options-on-your-website-part-2\/","title":{"rendered":"How to Use Divi&#8217;s New Border Style Options on Your Website (Part 2)"},"content":{"rendered":"\n<div id=\"post-66425\">\n<p>Divi and its new border options add a ton of new possibilities to designing a new website with Divi\u2019s built-in settings only. To help you illustrate some of the things you can do with the border options, we\u2019re recreating the examples of the announcement post. In the first part of this post, we\u2019ve handled 7 of the 13 examples. And in this post, we\u2019ll be handling the remaining examples step by step.<\/p>\n<p>We\u2019re not going to share all of the settings of every module that is being used. We\u2019re rather going to focus on the settings that\u2019ll help you achieve the border results. Let\u2019s take a look at the examples we\u2019ll be recreating step by step before we dive into the tutorial.<\/p>\n<h2>The Examples We\u2019ll be Recreating in This Post<\/h2>\n<h3>Example #8<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66450 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8.jpg\" alt=\"border\" width=\"880\" height=\"511\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8-300x174.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8-768x446.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8-610x354.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Example #9<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66451 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9.jpg\" alt=\"border\" width=\"880\" height=\"448\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9-300x153.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9-768x391.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9-610x311.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Example #10<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66452 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10.jpg\" alt=\"\" width=\"880\" height=\"457\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10-300x156.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10-768x399.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10-610x317.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Example #11<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66453 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11.jpg\" alt=\"border\" width=\"880\" height=\"540\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11-300x184.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11-768x471.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11-610x374.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Example #12<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66454 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12.jpg\" alt=\"border\" width=\"880\" height=\"531\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12-300x181.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12-768x463.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12-610x368.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Example #13<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66455 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13.jpg\" alt=\"border\" width=\"880\" height=\"541\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13-300x184.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13-768x472.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13-610x375.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>How to Use Divi\u2019s New Border Style Options on Your Website (Part 2)<\/h2>\n<p><iframe loading=\"lazy\" title=\"How to Use Divi\u2019s New Border Style Options on Your Website (Part 2)\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/pIIKxMcpa0s?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><a class=\"button primary-button inline-button accent-red\" href=\"https:\/\/www.youtube.com\/c\/elegantthemes?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">Subscribe To Our Youtube Channel<\/a><\/p>\n<h2>Recreate Borders of Example #8<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66450 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8.jpg\" alt=\"border\" width=\"880\" height=\"511\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8-300x174.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8-768x446.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo8-610x354.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>The Border Concept<\/h3>\n<p>This example makes use of both options you have within the Border subcategory; rounded corners and border styles. The border settings are made to each one of the tables individually, instead of all of them at once, because they\u2019re slightly different from one another.<\/p>\n<h3>Row Settings<\/h3>\n<h4>Column Structure<\/h4>\n<p>Start by adding a row with one column to an existing section.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-borders aligncenter wp-image-66466 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor6.png\" alt=\"border\" width=\"880\" height=\"423\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor6.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor6-300x144.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor6-768x369.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor6-610x293.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Add Pricing Tables Module &amp; Tables<\/h3>\n<p>Then, add a Pricing Tables Module to that row and add the tables to it.<\/p>\n<h3>First Pricing Table<\/h3>\n<h4>Border Settings<\/h4>\n<p>Each pricing table needs the border settings individually. That\u2019s because they slightly differ from one another. Open the first pricing table, the one on the left, and add the following settings to the Border subcategory:<\/p>\n<ul>\n<li>Top Left: 6px<\/li>\n<li>Bottom Left: 6px<\/li>\n<li>Top Right: 0px<\/li>\n<li>Bottom Right: 0px<\/li>\n<li>Top Border Width: 10px<\/li>\n<li>Top Border Color:\u00a0#7272ff<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66462 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor1.png\" alt=\"border\" width=\"880\" height=\"492\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor1-300x168.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor1-768x429.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor1-610x341.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Box Shadow Settings<\/h4>\n<p>Then, open the Box Shadow subcategory and use the following settings:<\/p>\n<ul>\n<li>Box Shadow Horizontal Position: 0px<\/li>\n<li>Box Shadow Vertical Position: 2px<\/li>\n<li>Box Shadow Blur Strength: 50px<\/li>\n<li>Box Shadow Spread Strength: 0px<\/li>\n<li>Shadow Color:\u00a0rgba(0,0,0,0.1)<\/li>\n<li>Box Shadow Position: Outer Shadow<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66459 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2.png\" alt=\"border\" width=\"880\" height=\"508\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-300x173.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-768x443.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-610x352.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Second Pricing Table<\/h3>\n<h4>Border Settings<\/h4>\n<p>The second pricing table, has instead, the following settings:<\/p>\n<ul>\n<li>Top Left: 6px<\/li>\n<li>Bottom Left: 6px<\/li>\n<li>Top Right: 6px<\/li>\n<li>Bottom Right: 6px<\/li>\n<li>Top Border Width: 10px<\/li>\n<li>Top Border Color:\u00a0#09e1c0<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66463 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor3.png\" alt=\"border\" width=\"880\" height=\"521\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor3-300x178.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor3-768x455.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor3-610x361.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Box Shadow Settings<\/h4>\n<p>Use the same box shadow as the one for the first pricing table.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66459 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2.png\" alt=\"border\" width=\"880\" height=\"508\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-300x173.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-768x443.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-610x352.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Third Pricing Table<\/h3>\n<h4>Border Settings<\/h4>\n<p>The last pricing table will need the following settings for the Border subcategory:<\/p>\n<ul>\n<li>Top Left: 0px<\/li>\n<li>Bottom Left: 0px<\/li>\n<li>Top Right: 6px<\/li>\n<li>Bottom Right: 6px<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66464 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor4.png\" alt=\"border\" width=\"880\" height=\"507\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor4.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor4-300x173.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor4-768x442.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor4-610x351.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Box Shadow Settings<\/h4>\n<p>Again, the same settings apply to the Box Shadow subcategory.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66459 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2.png\" alt=\"border\" width=\"880\" height=\"508\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-300x173.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-768x443.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/bor2-610x352.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>Recreate Borders of Example #9<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66451 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9.jpg\" alt=\"border\" width=\"880\" height=\"448\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9-300x153.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9-768x391.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo9-610x311.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>The Border Concept<\/h3>\n<p>This border concept allows you to create a border on the entire row. We\u2019re using the same color for the row background and the border which helps us create some space between the column 2 background image and the row.<\/p>\n<h3>Row Settings<\/h3>\n<h4>Column Structure<\/h4>\n<p>For this example, you will need to add a two-column row to an existing section.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66469 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor3.png\" alt=\"border\" width=\"880\" height=\"499\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor3-300x170.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor3-768x435.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor3-610x346.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Background Color<\/h4>\n<p>Then, open the row settings and add \u2018#ffffff\u2019 as the background color.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66470 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor4.png\" alt=\"border\" width=\"880\" height=\"494\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor4.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor4-300x168.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor4-768x431.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor4-610x342.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Column 2 Background Image<\/h4>\n<p>Then you can add all kinds of modules to that row, or, choose a column background images you\u2019d like to appear within your row.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66471 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor5.png\" alt=\"border\" width=\"880\" height=\"466\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor5.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor5-300x159.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor5-768x407.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor5-610x323.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Sizing<\/h4>\n<p>Move on to the Design tab and add the following settings to the Sizing subcategory:<\/p>\n<ul>\n<li>Use Custom Gutter Width: Yes<\/li>\n<li>Gutter Width: 1<\/li>\n<li>Equalize Column Heights: Yes<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66697 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor9.png\" alt=\"border\" width=\"880\" height=\"443\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor9.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor9-300x151.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor9-768x387.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor9-610x307.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Border<\/h4>\n<p>Then, scroll down and add the following border style to your row:<\/p>\n<ul>\n<li>Border Width: 20px<\/li>\n<li>Border Color: #ffffff<\/li>\n<li>Border Style: Solid<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66467 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor1.png\" alt=\"border\" width=\"880\" height=\"516\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor1-300x176.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor1-768x450.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor1-610x358.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Box Shadow<\/h4>\n<p>Lastly, you can also add some box shadow to create more depth:<\/p>\n<ul>\n<li>Box Shadow Horizontal Position: 0px<\/li>\n<li>Box Shadow Vertical Position: 2px<\/li>\n<li>Box Shadow Blur Strength: 67px<\/li>\n<li>Box Shadow Spread Strength: 0px<\/li>\n<li>Shadow Color:\u00a0rgba(0,0,0,0.23)<\/li>\n<li>Box Shadow Position: Outer Shadow<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66468 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor2.png\" alt=\"border\" width=\"880\" height=\"532\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor2-300x181.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor2-768x464.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/cor2-610x369.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>Recreate Borders of Example #10<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66452 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10.jpg\" alt=\"\" width=\"880\" height=\"457\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10-300x156.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10-768x399.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo10-610x317.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>The Border Concept<\/h3>\n<p>For the next example, we\u2019re going to create a tablet that is half transparent. This, in combination with a gradient background, gives a beautiful result.<\/p>\n<h3>Section Settings<\/h3>\n<h4>Gradient Background<\/h4>\n<p>Start by adding a new standard section and add a gradient background to it. In this example, we\u2019ve used the following settings:<\/p>\n<ul>\n<li>First Color:\u00a0#ca70ff<\/li>\n<li>Second Color:\u00a0#a530ff<\/li>\n<li>Gradient Type: Linear<\/li>\n<li>Gradient Direction: 180deg<\/li>\n<li>Start Position: 0%<\/li>\n<li>End Position: 100%<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66586 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor8.png\" alt=\"border\" width=\"880\" height=\"458\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor8.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor8-300x156.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor8-768x400.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor8-610x317.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Row Settings<\/h3>\n<h4>Column Structure<\/h4>\n<p>Then, add a row with one column to the section you\u2019ve created.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66481 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor1.png\" alt=\"border\" width=\"880\" height=\"469\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor1-300x160.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor1-768x409.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor1-610x325.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Background Color<\/h4>\n<p>Open the row settings and add \u2018rgba(255,255,255,0.19)\u2019 as the background color.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66484 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor2.png\" alt=\"border\" width=\"880\" height=\"520\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor2-300x177.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor2-768x454.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor2-610x360.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Spacing<\/h4>\n<p>Then, move on to the Design tab and add the following Custom Padding:<\/p>\n<ul>\n<li>Top &amp; Bottom: 2%<\/li>\n<li>Right &amp; Left: 5%<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66486 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor3.png\" alt=\"border\" width=\"880\" height=\"543\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor3-300x185.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor3-768x474.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor3-610x376.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Border<\/h4>\n<p>Scroll down, open the Border subcategory and add the following settings to it:<\/p>\n<ul>\n<li>Top Left: 30px<\/li>\n<li>Bottom Left: 30px<\/li>\n<li>Top Right: 30px<\/li>\n<li>Bottom Right: 30px<\/li>\n<li>Border Width: 5px<\/li>\n<li>Border Color:\u00a0rgba(255,255,255,0.07)<\/li>\n<li>Border Style: Solid<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66489 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor4.png\" alt=\"border\" width=\"880\" height=\"543\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor4.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor4-300x185.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor4-768x474.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor4-610x376.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Box Shadow<\/h4>\n<p>Lastly, add the following box shadow to the row:<\/p>\n<ul>\n<li>Box Shadow Horizontal Position: 0px<\/li>\n<li>Box Shadow Vertical Position: 13px<\/li>\n<li>Box Shadow Blur Strength: 64px<\/li>\n<li>Box Shadow Spread Strength: -11px<\/li>\n<li>Shadow Color:\u00a0rgba(26,54,68,0.36)<\/li>\n<li>Box Shadow Position: Outer Shadow<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66492 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor5.png\" alt=\"border\" width=\"880\" height=\"530\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor5.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor5-300x181.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor5-768x463.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/dor5-610x367.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Add Video Module to Column<\/h3>\n<p>Lastly, add a Video Module to the column of your row and upload a video or insert a video link.<\/p>\n<h2>Recreate Borders of Example #11<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66453 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11.jpg\" alt=\"border\" width=\"880\" height=\"540\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11-300x184.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11-768x471.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo11-610x374.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>The Border Concept<\/h3>\n<p>The next example of awesome border settings is one that is applied to an Image Module. You can create stunning results for your images by combining box shadows and borders and this example shows that off.<\/p>\n<h3>Image Module Settings<\/h3>\n<h4>Border<\/h4>\n<p>Add an Image Module to an existing column and after adding the image, move on to the Design tab. Open the Border subcategory and add the following settings to the top and left side:<\/p>\n<ul>\n<li>Border Width: 25px<\/li>\n<li>Border Color:\u00a0#333333<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66518 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor1.png\" alt=\"border\" width=\"880\" height=\"498\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor1-300x170.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor1-768x435.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor1-610x345.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>And the following settings to the right and bottom:<\/p>\n<ul>\n<li>Border Width: 25px<\/li>\n<li>Border Color:\u00a0#fcd21d<br \/><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66519 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor2.png\" alt=\"border\" width=\"880\" height=\"473\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor2-300x161.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor2-768x413.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor2-610x328.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/li>\n<\/ul>\n<h4>Box Shadow<\/h4>\n<p>Then, add the following box shadow as well:<\/p>\n<ul>\n<li>Box Shadow Horizontal Position: 0px<\/li>\n<li>Box Shadow Vertical Position: 0px<\/li>\n<li>Box Shadow Blur Strength: 0px<\/li>\n<li>Box Shadow Spread Strength: 40px<\/li>\n<li>Shadow Color:\u00a0#ffffff<\/li>\n<li>Box Shadow Position: Inner Shadow<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66520 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor3.png\" alt=\"border\" width=\"880\" height=\"487\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor3-300x166.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor3-768x425.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/eor3-610x338.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>Recreate Borders of Example #12<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66454 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12.jpg\" alt=\"border\" width=\"880\" height=\"531\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12-300x181.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12-768x463.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo12-610x368.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>The Border Concept<\/h3>\n<p>The following example allows you to create a bigger picture for the Blurb Modules you\u2019re using on your website. Although there\u2019s only a little difference between the modules, it\u2019s enough to make them stand out from each other.<\/p>\n<h3>Row Settings<\/h3>\n<h4>Column Structure<\/h4>\n<p>Start by adding two rows with both three columns.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66535 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor7.png\" alt=\"border\" width=\"880\" height=\"343\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor7.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor7-300x117.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor7-768x299.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor7-610x238.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Blurb Module Overall Settings<\/h3>\n<h4>Spacing<\/h4>\n<p>The first thing we\u2019ll be doing is adding all the settings that apply to all of the Blurb Modules. The Custom Padding of \u201940px\u2019 for each option is one of those settings.<img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66529 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor1.png\" alt=\"border\" width=\"880\" height=\"496\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor1-300x169.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor1-768x433.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor1-610x344.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Border Style<\/h4>\n<p>Then, add the following top border to the Border subcategory:<\/p>\n<ul>\n<li>Border Width: 6px<\/li>\n<li>Border Color:\u00a0#dddddd<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66530 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor2.png\" alt=\"border\" width=\"880\" height=\"513\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor2-300x175.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor2-768x448.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor2-610x356.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>The bottom will need the following settings:<\/p>\n<ul>\n<li>Border Width: 4px<\/li>\n<li>Border Color:\u00a0#fcd21d<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66531 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor3.png\" alt=\"border\" width=\"880\" height=\"511\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor3-300x174.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor3-768x446.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor3-610x354.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Lastly, add the following border style to the left and right side:<\/p>\n<ul>\n<li>Border Width: 2px<\/li>\n<li>Border Color:\u00a0#dddddd<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66532 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor5.png\" alt=\"border\" width=\"880\" height=\"490\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor5.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor5-300x167.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor5-768x428.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/gor5-610x340.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Clone Blurb Module Five Times<\/h4>\n<p>Once you\u2019ve added all of the general settings to a Blurb Module, you can clone these five times and place them within the remaining columns. In the next part, we\u2019re going to add the various rounded corners to each Blurb Module individually.<\/p>\n<h4>First Row Rounded Corners<\/h4>\n<h5>Left Blurb Module<\/h5>\n<p>The first Blurb Module within the first row has the following rounded corners:<\/p>\n<ul>\n<li>Top Left: 60px<\/li>\n<li>Bottom Left: 0px<\/li>\n<li>Top Right: 0px<\/li>\n<li>Bottom Right: 60px<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66537 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1.png\" alt=\"border\" width=\"880\" height=\"510\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1-300x174.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1-768x445.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1-610x354.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h5>Middle Blurb Module<\/h5>\n<p>The second Blurb Module\u2019s rounded corners are the following:<\/p>\n<ul>\n<li>Top Left: 0px<\/li>\n<li>Bottom Left: 60px<\/li>\n<li>Top Right: 0px<\/li>\n<li>Bottom Right: 60px<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66538 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor2.png\" alt=\"border\" width=\"880\" height=\"471\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor2-300x161.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor2-768x411.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor2-610x326.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h5>Right Blurb Module<\/h5>\n<p>The last Blurb Module of the first row has the following rounded corners:<\/p>\n<ul>\n<li>Top Left: 0px<\/li>\n<li>Bottom Left: 60px<\/li>\n<li>Top Right: 60px<\/li>\n<li>Bottom Right: 0px<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66539 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3.png\" alt=\"border\" width=\"880\" height=\"408\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3-300x139.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3-768x356.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3-610x283.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Second Row Rounded Corners<\/h4>\n<h5>Left Blurb Module<\/h5>\n<p>The left and first Blurb Module of the second row has the same settings as the last one in the first row:<\/p>\n<ul>\n<li>Top Left: 0px<\/li>\n<li>Bottom Left: 60px<\/li>\n<li>Top Right: 60px<\/li>\n<li>Bottom Right: 0px<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66539 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3.png\" alt=\"border\" width=\"880\" height=\"408\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3-300x139.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3-768x356.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor3-610x283.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h5>Middle Blurb Module<\/h5>\n<p>The middle one needs the following rounded corners:<\/p>\n<ul>\n<li>Top Left: 60px<\/li>\n<li>Bottom Left: 0px<\/li>\n<li>Top Right: 60px<\/li>\n<li>Bottom Right: 0px<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66540 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor5.png\" alt=\"border\" width=\"880\" height=\"405\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor5.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor5-300x138.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor5-768x353.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor5-610x281.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h5>Right Blurb Module<\/h5>\n<p>The last Blurb Module of the second row has the same rounded corners as the first Blurb Module in the first row:<\/p>\n<ul>\n<li>Top Left: 60px<\/li>\n<li>Bottom Left: 0px<\/li>\n<li>Top Right: 0px<\/li>\n<li>Bottom Right: 60px<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66537 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1.png\" alt=\"border\" width=\"880\" height=\"510\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1-300x174.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1-768x445.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/hor1-610x354.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>Recreate Borders of Example #13<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66455 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13.jpg\" alt=\"border\" width=\"880\" height=\"541\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13.jpg 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13-300x184.jpg 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13-768x472.jpg 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/demo13-610x375.jpg 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>The Border Concept<\/h3>\n<p>The last example of this post helps you add a Polaroid effect to your images. This is, for instance, a great way to showcase images in a memorable way. We\u2019re, again, using a combination of border settings and box shadow settings.<\/p>\n<h3>Image Module Settings<\/h3>\n<h4>Border<\/h4>\n<p>Add an Image Module to an existing row and make use of the following settings for the top, right and left side:<\/p>\n<ul>\n<li>Border Width: 13px<\/li>\n<li>Border Color:\u00a0#ffffff<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66522 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for1.png\" alt=\"border\" width=\"880\" height=\"508\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for1-300x173.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for1-768x443.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for1-610x352.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>The bottom is slightly different:<\/p>\n<ul>\n<li>Border Width: 60px<\/li>\n<li>Border Color:\u00a0#ffffff<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66523 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for2.png\" alt=\"border\" width=\"880\" height=\"472\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for2-300x161.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for2-768x412.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for2-610x327.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h4>Box Shadow<\/h4>\n<p>Lastly, add the following box shadow:<\/p>\n<ul>\n<li>Box Shadow Horizontal Position: 0px<\/li>\n<li>Box Shadow Vertical Position: 23px<\/li>\n<li>Box Shadow Blur Strength: 27px<\/li>\n<li>Box Shadow Spread Strength: 16px<\/li>\n<li>Shadow Color:\u00a0rgba(0,0,0,0.21)<\/li>\n<li>Box Shadow Position: Outer Shadow<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-66524 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for3.png\" alt=\"border\" width=\"880\" height=\"458\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for3-300x156.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for3-768x400.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/for3-610x317.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Clone Image Module as Many Times as Needed<\/h3>\n<p>To create the entire result, you can clone the Image Module as many times as you want and place them in the different columns. The only thing you\u2019ll have to change is the image.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>This was part two of exploring the new Divi border options. All of the examples that were made within this blog post are part of Divi\u2019s built-in settings and don\u2019t require any additional CSS code at all. If you have any questions; make sure you leave them in the comment section below!<\/p>\n<p><em>Featured Image by estherpoon \/ shutterstock.com<\/em><\/p>\n<\/div>\n<blockquote class=\"wp-embedded-content\" data-secret=\"1jOxCNi2Oy\"><p><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-use-divis-new-border-style-options-on-your-website-part-2\">How to Use Divi&#8217;s New Border Style Options on Your Website (Part 2)<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;How to Use Divi&#8217;s New Border Style Options on Your Website (Part 2)&#8221; &#8212; Elegant Themes Blog\" src=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-use-divis-new-border-style-options-on-your-website-part-2\/embed#?secret=915IMZjJnP#?secret=1jOxCNi2Oy\" data-secret=\"1jOxCNi2Oy\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Divi and its new border options add a ton of new possibilities to designing a new website with Divi\u2019s built-in settings only. To help you illustrate some of the things you can do with the border options, we\u2019re recreating the examples of the announcement post. In the first part of this post, we\u2019ve handled 7 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":825882,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1522],"tags":[],"class_list":["post-825881","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-en"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/825881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=825881"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/825881\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media\/825882"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=825881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=825881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=825881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}