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.

Answer 1

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;