{"id":10662,"date":"2023-01-03T15:44:33","date_gmt":"2023-01-03T22:44:33","guid":{"rendered":"https:\/\/www.elegantthemes.com\/documentation\/?p=10662"},"modified":"2023-02-03T15:51:35","modified_gmt":"2023-02-03T22:51:35","slug":"border-options","status":"publish","type":"post","link":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/","title":{"rendered":"Using Divi Border Options"},"content":{"rendered":"<p>With Divi Border Options it&#8217;s possible to create truly unique designs for your website. You can apply custom borders to every element within Divi including sections, rows, and modules! There are several border styles available and even the option to round the corners of the border.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2023\/01\/border-style-example.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2023\/01\/border-style-example.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2>In this doc, we&#8217;ll cover:<\/h2>\n<ul>\n<li><a href=\"#border-style-examples\">Border Style Examples<\/a>\n<ul>\n<li><a href=\"#example-1\">Example 1<\/a><\/li>\n<li><a href=\"#example-2\">Example 2<\/a><\/li>\n<li><a href=\"#example-3\">Example 3<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#how-to-access-border-styles\">How to Access Border Styles<\/a><\/li>\n<li><a href=\"#all-divi-border-options-and-settings-explained\">All Divi Border Options and Settings Explained<\/a>\n<ul>\n<li><a href=\"#rounded-corners\">Rounded Corners<\/a><\/li>\n<li><a href=\"#border-styles\">Border Styles<\/a><\/li>\n<li><a href=\"#border-width\">Border Width<\/a><\/li>\n<li><a href=\"#border-color\">Border Color<\/a><\/li>\n<li><a href=\"#border-style\">Border Style<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#tips--best-practices-for-using-divi-border-options\">Tips &amp; Best Practices for Using Divi Border Options<\/a>\n<ul>\n<li><a href=\"#get-creative\">Get Creative<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#divi-border-options-resources\">Divi Border Options Resources<\/a><\/li>\n<li><a href=\"#continue-learning\">Continue Learning<\/a><\/li>\n<\/ul>\n<h2 id=\"border-style-examples\">Border Style Examples<\/h2>\n<p>First, let&#8217;s take a look at a few examples of what&#8217;s possible with border styling.<\/p>\n<h3 id=\"example-1\">Example 1<\/h3>\n<p>In this example, you can see that the corners of the row are rounded.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14589 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options.png\" alt=\"Divi Border Options example 1\" width=\"1800\" height=\"1323\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options-300x221.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options-1024x753.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options-768x564.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options-1536x1129.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"example-2\">Example 2<\/h3>\n<p>In this example, we&#8217;ve achieved the look of mobile device mockups by rounding the corners of these modules.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14590 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-border-style-options.png\" alt=\"Mobile App Mockup using Divi Border Options\" width=\"1800\" height=\"1293\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-border-style-options.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-border-style-options-300x216.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-border-style-options-1024x736.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-border-style-options-768x552.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-border-style-options-1536x1103.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3 id=\"example-3\">Example 3<\/h3>\n<p>I11n this example, we&#8217;ve added some fun border styling to each of the services offered. The top borders are gray with one rounded corner, and the bottom border is yellow with rounded corners. It&#8217;s a unique way to distinguish between elements while also highlighting them.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14592 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-border-style-options.png\" alt=\"Services section using Divi Border Options\" width=\"1800\" height=\"934\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-border-style-options.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-border-style-options-300x156.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-border-style-options-1024x531.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-border-style-options-768x399.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-border-style-options-1536x797.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><a class=\"button inline-button primary-button\" href=\"https:\/\/www.elegantthemes.com\/preview\/Divi\/borders\/\">View More Live Examples<\/a><\/p>\n<h2 id=\"how-to-access-border-styles\">How to Access Border Styles<\/h2>\n<p>The Border settings group is available within all Sections, Rows, Columns, and Modules.<\/p>\n<p>To access the Border settings group, open up the settings of the design element you&#8217;re working on and navigate to <strong>Design &gt; Border<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14598 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/5-border-style-options.png\" alt=\"How to access Divi Border Options\" width=\"1800\" height=\"1105\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/5-border-style-options.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/5-border-style-options-300x184.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/5-border-style-options-1024x629.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/5-border-style-options-768x471.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/5-border-style-options-1536x943.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"all-divi-border-options-and-settings-explained\">All Divi Border Options and Settings Explained<\/h2>\n<p>Let&#8217;s dive into each setting and explore what&#8217;s possible with Divi&#8217;s Border Options.<\/p>\n<h3 id=\"rounded-corners\">Rounded Corners<\/h3>\n<p>The first setting you&#8217;ll see is Rounded Corners. Here you have the ability to create rounded borders by adjusting the border radius of all four corners. You can round the border corners collectively or individually by clicking the chainlink icon to link or unlink the corners.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2023\/01\/6-border-style-options-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2023\/01\/6-border-style-options-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"border-styles\">Border Styles<\/h2>\n<p>Here you have the option to add a border to all sides or individual sides. Tab through each option to choose which side(s) you want to have a border.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14712 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/7-border-style-options.png\" alt=\"Border styles with Divi Border Options\" width=\"1800\" height=\"1087\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/7-border-style-options.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/7-border-style-options-300x181.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/7-border-style-options-1024x618.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/7-border-style-options-768x464.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/7-border-style-options-1536x928.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"border-width\">Border Width<\/h2>\n<p>To adjust the border width (the thickness of the border), type a numerical value in the input field or drag the range slider to increase and decrease the thickness of the border.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/8-border-style-options-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/8-border-style-options.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"border-color\">Border Color<\/h2>\n<p>To set the border color, choose a color from your site&#8217;s color palette or use the eyedropper icon to find a new color. Drag and drop the color picker or paste a CSS hex code of the color you want.<\/p>\n<p>You can also choose from Saved Colors, Global Colors, and Recent Colors, by clicking on those links beneath the color palette. To learn all about the Divi Color Management System, <a href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/color-management-system\/\">click here<\/a>.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/9-border-style-options-1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/9-border-style-options.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"border-style\">Border Style<\/h2>\n<p>There are 9 border styles to choose from. Below are examples of each. To select a style, simply click it from the dropdown menu.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14727 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/10-border-style-options.png\" alt=\"Border style Divi Border Options\" width=\"1800\" height=\"1237\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/10-border-style-options.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/10-border-style-options-300x206.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/10-border-style-options-1024x704.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/10-border-style-options-768x528.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/10-border-style-options-1536x1056.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>You can even get creative by styling borders individually with unique border styles to create truly stunning designs.\u00a0You can add borders to one edge, two edges, three edges, or four and you can adjust the styles of each edge individually.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10746 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/1-borderoptions-1.png\" alt=\"Solid border style in Divi Border Options\" width=\"1800\" height=\"471\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/1-borderoptions-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/1-borderoptions-1-300x79.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/1-borderoptions-1-1024x268.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/1-borderoptions-1-768x201.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/1-borderoptions-1-1536x402.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10747 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/2-borderoptions-1.png\" alt=\"Dashed border in Divi Border Options\" width=\"1800\" height=\"496\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/2-borderoptions-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/2-borderoptions-1-300x83.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/2-borderoptions-1-1024x282.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/2-borderoptions-1-768x212.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/2-borderoptions-1-1536x423.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10748 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/3-borderoptions-1.png\" alt=\"Double border in Divi Border Options\" width=\"1800\" height=\"494\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/3-borderoptions-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/3-borderoptions-1-300x82.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/3-borderoptions-1-1024x281.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/3-borderoptions-1-768x211.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/3-borderoptions-1-1536x422.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10749 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/4-borderoptions-1.png\" alt=\"Groove border in Divi Border Options\" width=\"1800\" height=\"490\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/4-borderoptions-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/4-borderoptions-1-300x82.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/4-borderoptions-1-1024x279.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/4-borderoptions-1-768x209.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/4-borderoptions-1-1536x418.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10750 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-borderoptions-1.png\" alt=\"Ridge border in Divi Border Options\" width=\"1800\" height=\"489\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-borderoptions-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-borderoptions-1-300x82.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-borderoptions-1-1024x278.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-borderoptions-1-768x209.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/5-borderoptions-1-1536x417.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10751 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/6-borderoptions-1.png\" alt=\"Insert border in Divi Border Options\" width=\"1800\" height=\"496\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/6-borderoptions-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/6-borderoptions-1-300x83.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/6-borderoptions-1-1024x282.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/6-borderoptions-1-768x212.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/6-borderoptions-1-1536x423.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10752 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/7-borderoptions-1.png\" alt=\"Outset border in Divi Border Options\" width=\"1800\" height=\"486\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/7-borderoptions-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/7-borderoptions-1-300x81.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/7-borderoptions-1-1024x276.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/7-borderoptions-1-768x207.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/7-borderoptions-1-1536x415.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10753 size-full\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/8-borderoptions-1.png\" alt=\"None border in Divi Border Options\" width=\"1800\" height=\"478\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/8-borderoptions-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/8-borderoptions-1-300x80.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/8-borderoptions-1-1024x272.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/8-borderoptions-1-768x204.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/07\/8-borderoptions-1-1536x408.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"tips--best-practices-for-using-divi-border-options\">Tips &#038; Best Practices for Using Divi Border Options<\/h2>\n<p>When using Divi Border Options, keep these tips and best practices in mind!<\/p>\n<h3 id=\"get-creative\">Get Creative<\/h3>\n<p>The styling options are endless with Divi&#8217;s Border Options!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2019\/06\/divi-row-borders-preview.png\" alt=\"Creative borders with Divi Border Options\" width=\"880\" height=\"500\" \/><\/p>\n<p>This example shows how you can create truly stunning hero sections with Border Options. Learn how to create this design <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-creatively-use-divis-row-borders-to-create-a-stunning-hero-section-design\">here<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2019\/08\/border7.jpg\" alt=\"Hero sections with Divi Border Options\" width=\"742\" height=\"347\" \/><\/p>\n<p>Create an image border effect like the example above! Learn how to achieve this <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-background-image-border-designs-in-divi\">here<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2019\/05\/divi-animated-borders-example-1-desktop.gif\" alt=\"Unique image borders with Divi Border Options\" width=\"880\" height=\"514\" \/><\/p>\n<p>Or you can create animated border overlaps to highlight content on your website! Learn how to do this <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-animated-border-overlaps-to-highlight-content-with-divi\">here<\/a>.<\/p>\n<h2 id=\"continue-learning\">Continue Learning<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.elegantthemes.com\/preview\/Divi\/borders\/#demo11\">View Examples of Border Styles<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-creatively-use-divis-row-borders-to-create-a-stunning-hero-section-design\">How to Creatively Use Divi\u2019s Row Borders to Create a Stunning Hero Section Design<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/using-low-z-index-module-borders-as-backgrounds-with-divi\">Using Low Z Index Module Borders as Backgrounds with Divi<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-animated-border-overlaps-to-highlight-content-with-divi\">How to Create Animated Border Overlaps to Highlight Content with Divi<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Divi&#8217;s border options make it possible to easily add and style borders to any page element.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2],"tags":[],"class_list":["post-10662","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"description\" content=\"Divi Border Options makes it easy to add unique border styles to every element within Divi. In this doc we&#039;ll cover all border settings.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Divi Border Options - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Divi Border Options makes it easy to add unique border styles to every element within Divi. In this doc we&#039;ll cover all border settings.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-03T22:44:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T22:51:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options.png\" \/>\n<meta name=\"author\" content=\"Chaucee Stillman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaucee Stillman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/\"},\"author\":{\"name\":\"Chaucee Stillman\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"headline\":\"Using Divi Border Options\",\"datePublished\":\"2023-01-03T22:44:33+00:00\",\"dateModified\":\"2023-02-03T22:51:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/\"},\"wordCount\":662,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/1-border-style-options.png\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/\",\"name\":\"Using Divi Border Options - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/1-border-style-options.png\",\"datePublished\":\"2023-01-03T22:44:33+00:00\",\"dateModified\":\"2023-02-03T22:51:35+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"description\":\"Divi Border Options makes it easy to add unique border styles to every element within Divi. In this doc we'll cover all border settings.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/1-border-style-options.png\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/1-border-style-options.png\",\"width\":1800,\"height\":1323},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/border-options\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Divi Border Options\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\",\"name\":\"Chaucee Stillman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"caption\":\"Chaucee Stillman\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","description":"Divi Border Options makes it easy to add unique border styles to every element within Divi. In this doc we'll cover all border settings.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/","og_locale":"en_US","og_type":"article","og_title":"Using Divi Border Options - Elegant Themes Documentation","og_description":"Divi Border Options makes it easy to add unique border styles to every element within Divi. In this doc we'll cover all border settings.","og_url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2023-01-03T22:44:33+00:00","article_modified_time":"2023-02-03T22:51:35+00:00","og_image":[{"url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options.png","type":"","width":"","height":""}],"author":"Chaucee Stillman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaucee Stillman","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/#article","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/"},"author":{"name":"Chaucee Stillman","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"headline":"Using Divi Border Options","datePublished":"2023-01-03T22:44:33+00:00","dateModified":"2023-02-03T22:51:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/"},"wordCount":662,"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options.png","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/","url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/","name":"Using Divi Border Options - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/#primaryimage"},"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options.png","datePublished":"2023-01-03T22:44:33+00:00","dateModified":"2023-02-03T22:51:35+00:00","author":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"description":"Divi Border Options makes it easy to add unique border styles to every element within Divi. In this doc we'll cover all border settings.","breadcrumb":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/#primaryimage","url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options.png","contentUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-border-style-options.png","width":1800,"height":1323},{"@type":"BreadcrumbList","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/border-options\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.elegantthemes.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Using Divi Border Options"}]},{"@type":"WebSite","@id":"https:\/\/www.elegantthemes.com\/documentation\/#website","url":"https:\/\/www.elegantthemes.com\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.elegantthemes.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8","name":"Chaucee Stillman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","caption":"Chaucee Stillman"}}]}},"_links":{"self":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/10662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=10662"}],"version-history":[{"count":69,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/10662\/revisions"}],"predecessor-version":[{"id":15620,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/10662\/revisions\/15620"}],"wp:attachment":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=10662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/categories?post=10662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/tags?post=10662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}