Rounded underlines in CSS
December 11, 2023
Four years after writing about custom text underlines, I discovered a way to create rounded underlines in CSS. The solution is to draw the underline with a background gradient, then place two radial gradients on the linecaps.
By using box-decoration-break: clone, the background will be repainted for each individual line box of a wrapping inline element.
Sixty-six times have these eyes beheld the changing scene of autumn. I have said enough about moonlight, ask no more. Only listen to the voice of pines and cedars when no wind stirs.
Rounded underline with multi-line wrapping, ink-skipping on descenders, animation on hover, and selection fallback.
Ryōnen, 1711
The same text-shadow trick from the last post is used to clear gaps for descenders, though I layered more shadows to make a visually pleasing cutout. This really aids readability at small sizes.
When the text is selected, the custom underline is hidden and a native text-decoration: underline is positioned at the same offset. The final improvement is using @property to support animating a background color, enabling smooth hover effects.
Something here about the code and how it can be used: also TODO codeblock component