<fieldset> & <legend> effect without incorrect semantics.
Trying to help somebody else on another server who wants to achieve the pictured effect.
The effect of the "BUGGED" text's
padding-inline covering the border but still maintaining transparency to the background behind (which obviously isn't a solid colour) is like <fieldset> & <legend>, but using those elements here would be wrongly semantically and I'm struggling to think how to do it otherwise as there aren't relevant default styles on those elements to emulate
1 Reply
You could try creating an svg border and using the stroke-dasharray and stroke-dashoffset to create it.
I have created a quick codepen but there are some magic numbers in my demo which means that it isn't very scaleable. https://codepen.io/cbolson/pen/KKrQWMw