Skip to content
Knowledge Graph
jotoh.dev
Menu

Accent bar with border-radius

border-inline-start plus border-radius makes the inner edge of the bar curve at the corners.

Use a stripe in the background instead (linear-gradient). The radius then rounds only the outer corners. This works for right-to-left text too. In high-contrast mode backgrounds are removed, so keep a system-colour border there.

Put the bar colour in a variable (--jt-bar-color) so a new variant needs one line.