CSS 1px border stroke breaks around border radius

Question

This is for web dev. When using a 1px border radius on a circle or a square with really rounded corners, the stroke starts to break. If we were to change it to 2px's it would get better and better the more px we add. But is there a way to fix this problem with a 1px stroke?

background: rgba(32, 32, 32, .9);
height: 30px;
width: 30px;
border: 1px solid white;
border-radius: 20px;
:hover {
 height: 300px;
 width: 200px;
}

Images attached!

enter image description here

You can try `box-shadow` as an alternative. It tends to have smoother lines — TylerH, Apr 17 '14 at 14:03
is the browser skipping only 1 pixel or is it the entire curved border? If it's just one pixel, maybe setting the border radius off by 1px will fix it. — dzny, Apr 17 '14 at 20:27

score 67 · Answer 1 · answered Apr 13 '15 at 15:16

67

add box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; that will give you the anti-aliasing you're looking for.

answered Apr 13 '15 at 15:16

HexInteractive

1,784
13
7

6

`box-shadow: 0 0 1px transparent;` may also work (tested on Chrome) – oodavid Nov 14 '18 at 16:27
`box-shadow: 0 0 1px transparent;` didn't work for me. but `box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white;` did! Thank you! – Alex Zak Jul 04 '23 at 08:39

score 2 · Answer 2 · answered Apr 17 '14 at 14:00

There isn't much you can do about this, unfortunately. That's up to the browser to determine how to render the sub-pixels that make up a curved 1px border. Some browsers will antialias it nicely, others will not.

The only reliable solution is to use images, which is so... 90s. Or something XD Point is, we shouldn't have to do things like that, but sometimes we have to either settle for imperfect rendering, or use outdated methods.

score 2 · Answer 3 · answered Apr 17 '14 at 14:05

This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.

See this article for a better explanation.

CSS 1px border stroke breaks around border radius

3 Answers3

Linked