Member-only story
Getting borders right between Figma and CSS
When border corners look different but the pixels don’t lie.
Borderline Failure
I had an issue recently. When using the same pixel measurements for border-radius in Figma and in our production code. The borders consistently looked off.
In Figma, they were more rounded. In code, they were sharper.
Having a Stroke
In many graphical software like Figma and Photoshop; we create borders using strokes. We also choose our stroke position as outside, center, and inside.
In CSS, borders are not strokes. There are no position options. The border is part of our shape. The whole shape size (width, height etc) includes the border thickness.
This means we need our borders in Figma to be part of the shape dimensions.
Below you can see how the overall visual size of the shape changes based on the stroke positioning.
To keep the same consistency with how borders are drawn with CSS, we had to ensure the stroke was always inside when making components.
There is a similar option in CSS for the outside stroke called an outline. (but no one uses that I swear)
Cornering the Radius
But what about the weird corner radius issue.
In Figma, corner radius is NOT the radius of our stroke. It’s the corner radius of our shape. The stroke radius is derived from our overall shape.
If a stroke is set to outside. Then the inside corner of the stroke will be the corner radius and the outside corner will seem oversized.
Outside stroke corner radius = corner radius + stroke width.
