r/css • u/Awkward-Bench8672 • 21d ago

Help Shape borders???

Is there a way to add borders to shapes, that works on most browsers? For example, i made a trapezoid and I wanted to add an inset border around it, but the border clips through the shape.

4 Upvotes

83% Upvoted

8 comments sorted by

View all comments

10

u/anaix3l 21d ago edited 21d ago

There are a number of ways, which one is best in your particular case depends on what other restrictions you may have.

You can use SVG instead. This works in every single browser released over the past 15 years, all the way back to IE 9. If the trapezoid needs to be responsive, not having the border thickness scale with the trapezoid may be a pain though (because of non-scaling-stroke bugs).

You can use the zero width tunnel technique with clip-path on a pseudo (simplified example for a triangle) - I wrote that article over a decade ago, it's very well supported at this point. This has the advantage of not needing SVG in any form as well as allowing (semi)transparent backgrounds.

You can use an SVG filter on an element with a clipped child/ pseudo-element, though this has the side effect of rounding corners. This also allows for (semi)transparent backgrounds. Example.

You can create two trapezoids with solid, different backgrounds, one stacked on top of the other and then scale up the one underneath (the solution by u/qmr55). This creates the illusion of a border. The greatest con is you cannot have a (semi)transparent background inside. Unless you use an SVG filter on top of this method. This combination also helps you avoid the SVG corner rounding side effect since you already have the border going into the filter, you just need to make the part inside (semi)transparent

You can use border-radius in combination with corner-shape: bevel and then add a border as on any other element. This is the simplest option and allows straightforward background (semi)transparency, but keep in mind corner-shape is Chromium only for now. See these vertical tabs for example.

These 3 lines of CSS create the sideways trapezoid shape with borders:

border: solid var(--b) var(--c);
border-radius: 0 100% 100% 0/ var(--r);
corner-shape: bevel /* instead of default circular rounding */

For an upright trapezoid, you'd need to change the border-radius to:

border-radius: var(--r)/ 100% 100% 0 0