Overlapping divs with a single border

[jonnow]

Is a CSS method of achieving a border around two elements placed on top of each other to give the effect of a single shape?

Example on CodePen

So in the example, turning the red border on the div and span in a single shape, losing the border that falls inside the div area. Could shape-outline be used?

Thanks

[Paulie_D]

No, there isn’t.

HTML objects are rectangular and borders (and outlines) follow those shapes.

You might be a manage something with a clip-path or, for all practical purposes, in this case I’d use an SVG shape.

[jonnow]

Thanks, yeah an SVG shape does seem the way to go. Clip-path won’t give a border around the clipped shape as far as I can see, it applies the border to the div/element.

[wolfcry911]

https://codepen.io/wolfcry911/pen/REwWag

[Author]

Posts