The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Overlapping divs with a single border
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?
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.
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.