How to Add a Double Border to SVG Shapes

Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be generated at runtime — so you have to solve it …

The post How to Add a Double Border to SVG Shapes appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

https://css-tricks.com/how-to-add-a-double-border-to-svg-shapes/

Erstellt 4y | 21.04.2021, 15:21:09


Melden Sie sich an, um einen Kommentar hinzuzufügen

Andere Beiträge in dieser Gruppe

Getting Creative With Versal Letters

A versal letters is a typographic flourish found in illuminated manuscripts and traditional book design, where it adds visual interest and helps guide a reader’s eye to where they should begin.

18.07.2025, 17:40:17 | CSS tricks
Getting Clarity on Apple’s Liquid Glass

Gathered notes on Liquid Glass, Apple’s new design language that was introduced at WWDC 2025. These links are a choice selection of posts and resources that I've found helpful for understanding the

17.07.2025, 13:50:20 | CSS tricks
What I Took From the State of Dev 2025 Survey

State of Devs 2025 survey results are out! Sunkanmi Fafowora highlights a few key results about diversity, health, and salaries.


16.07.2025, 14:40:23 | CSS tricks
Setting Line Length in CSS (and Fitting Text to a Container)

The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.


14.07.2025, 14:10:12 | CSS tricks
The Layout Maestro Course

Layout. It’s one of those easy-to-learn, difficult-to-master things, like they say about playing bass. Not because it’s innately difficult to, say, place two elements next to each other

11.07.2025, 18:50:13 | CSS tricks
Scroll-Driven Sticky Heading

I was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven

11.07.2025, 14:20:16 | CSS tricks
Better CSS Shapes Using shape() — Part 4: Close and Move

This is the fourth post in a series about the new CSS shape() function. So far, we’ve covered the most common commands y

07.07.2025, 12:50:19 | CSS tricks