Is it possible to achieve a -like effect without using the tag?

Question

I personally like the

tag because of how it draws a box and puts the

at the top of it, over the border. Like this.

Answer 1

Use ::before pseudoelement to generate the top border of the emulated

, then position the emulated

element over the ::before block with z-index and position properties. Lastly, use gradient and a solid color-stop on the top of the emulated fieldset, setting the top color of the linear gradient to transparent so whatever background is behind the fake fieldset will be visible.