Custom hr in CSS

Is it possible to achieve something like this with css ? I dont even know how to start with this.
4 Replies
13eck
13eck16mo ago
Image tag. Inline SVG. Empty div with a background image. Lots of ways!
Jochem
Jochem16mo ago
two elements with border-radius could be another, though probably a bit finnicky. An SVG is probably the best option
capt_uhu
capt_uhu16mo ago
would need to be one of those 2 value border-radius values. Something like border-top-right-radius: 40px 100%;
capt_uhu
capt_uhu16mo ago
huh, hr with a ::before and ::after not anywhere near as fiddly as I was expecting it be: https://codepen.io/jsnkuhn/pen/QWVZKYY?editors=0100