Consider this a public service announcement, because I’ve been seeing this pattern show up in a lot more places than I used to.
Let’s say you’ve got a card pattern you use, and you’d like to zhuzh it up a bit. Put a one-sided border on it!
Whoops!
The naive implementation of this in CSS is something like border-block-start: 0.5rem solid pink. (Choose your own side and color.) But borders in CSS don’t render the way you might expect this to work when you have rounded corners!
Borders in CSS are designed to follow the curve of rounded corners. So what can we do instead?
Here’s my preferred approach:
background: linear-gradient(
to bottom,
var(--accent-color) 0.5rem,
var(--surface-elevated) 0.5rem
);
That’ll give you something like this:
Much better!
Bonus points
With this pattern, it’s important to be mindful of the balance between the thickness of the border and the amount of rounding in your corners:
If you have cards with a larger radius, the border will need to be thicker so that it doesn’t appear cropped off awkwardly. But if the border is too thick it will start to draw too much attention.
Ultimately, if your overall design calls for larger radiuses, it’s best to avoid this pattern altogether, or consider decreasing your radius to make this approach work.
If I’ve done my job right, you’re now in for seeing these done poorly all over the internet for a few weeks. I’m sorry, you’re welcome.