CSS: Border with border-radius has bad quality

Question

I want to know how can I fix the border of this play button. It has 1px of border and 50% border-radius, and it looks ugly. 2px looks ok but I need 1.

could there be other properties causing this? or maybe the screen resolution? — cocoa, Aug 20 '15 at 16:25
LOL, it is all screen resolution, even if you use a `img` with a 1px wide border you will still see it that way. no - fix possible. — Adam Buchanan Smith, Aug 20 '15 at 16:45
so even this sample looks bad when you view it? http://jsfiddle.net/u2j3nLqo/ — ericjbasti, Aug 20 '15 at 17:30

score 5 · Answer 1 · edited May 23 '17 at 11:46

5

Same questions solved here by Guy.

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.

or try box-shadow: 0 0 1px 0px @yourBlueColor inset, 0 0 1px 0px @yourBlueColor;

edited May 23 '17 at 11:46

Community

1
1

answered Aug 20 '15 at 16:47

Jiri Sykora

484
4
10

I don't have a background specified – Pietro Coelho Aug 20 '15 at 17:16
box-shadow even solves the issue, but doesn't look that great. But I don't think we have any other to solve that... – Pietro Coelho Aug 20 '15 at 17:19

score 2 · Answer 2 · answered Aug 20 '15 at 16:38

2

this problem is correlated to resolution dpi of your screen device , you can fix this with

border: 2px solid rgba(42, 91, 195, 0.35);

use 2px but use also a rgba transparent effect for reduce the size of border

answered Aug 20 '15 at 16:38

themich

193
1
3
15

score 1 · Answer 3 · answered Aug 08 '19 at 06:14

1

Not great, but looks quite a lot better by setting besides the border at 1px, an inset box-shadow with 1px blur-radius of the same color:

border: 1px solid #333;
box-shadow: inset 0 0 1px #333;

answered Aug 08 '19 at 06:14

Andres Cardona

21
2

CSS: Border with border-radius has bad quality

3 Answers3