{"id":338478,"date":"2021-04-21T07:26:28","date_gmt":"2021-04-21T14:26:28","guid":{"rendered":"https:\/\/css-tricks.com\/?p=338478"},"modified":"2021-04-21T07:26:31","modified_gmt":"2021-04-21T14:26:31","slug":"how-to-add-a-double-border-to-svg-shapes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-add-a-double-border-to-svg-shapes\/","title":{"rendered":"How to Add a Double Border to SVG Shapes"},"content":{"rendered":"\n

Let\u2019s say someone asks you to add a double<\/strong> border to some random geometric SVG shapes. For some reason, you can\u2019t use any graphic editor\u2009\u2014\u2009they need to be generated at runtime\u2009\u2014\u2009so you have to solve it with CSS or within the SVG syntax.<\/p>\n\n\n\n

Your first question might be: Is there anything like stroke-style: double<\/code> in SVG?<\/q> Well, the answer is not yet<\/a> and it\u2019s not that easy<\/a>. But I\u2019ll attempt it anyway to see what methods I can uncover. I\u2019ll explore the possibilities of three different basic shapes: circle, rectangle, and polygon. Pointing the ones that can keep a transparent color in the middle of the two lines.<\/p>\n\n\n\n\n\n\n\n

Spoiler alert:<\/strong> all the results have their downsides, at least with CSS and SVG, but let me walk you through my intents.<\/p>\n\n\n

The simple solutions<\/h3>\n\n\n

These don\u2019t work with all shapes, but they are the easiest of the solutions.<\/p>\n\n\n

outline<\/code> and box-shadow<\/code><\/h4>\n\n\n

The CSS properties outline<\/code> and box-shadow<\/code> only apply to the bounding box of the shape or SVG, and so both are great solutions only for squares and rectangles<\/strong>. They also allow flexible colors using custom properties.<\/p>\n\n\n\n

It only takes two lines of CSS with outline<\/code>, plus it keeps the background color visible through the shape.<\/p>\n\n\n\n

  • 🙁 Solution only for one shape.<\/li>
  • ✅ Simple code<\/li>
  • ✅ Borders are smooth<\/li>
  • ✅ Transparent background<\/li><\/ul>\n\n\n\n

    box-shadow<\/code> only needs one line of CSS, but we have to make sure that each shape has its own SVG<\/strong> as we can\u2019t apply box-shadow<\/code> directly to the shapes. Another thing to consider is that we have to apply the color of the background in the declaration.<\/p>\n\n\n\n

    • 🙁 Solution only for one shape<\/li>
    • ✅ Simple code<\/li>
    • ✅ Borders are smooth<\/li>
    • 🙁 No transparent background<\/li><\/ul>\n\n\n\n