Question

I am attempting to use rounded corners with CSS 3, but I am getting a strange bug. In IE9, everything shows up fine. However, in Chrome, the corners themselves seem too pale when I try to add colours to the border. Anyone else getting this bug? Is it even a bug?

An example of what I am using is the following:

border: solid 1px #000000;
-moz-border-radius: 10px;
-khtml-border-radius:10px;
border-radius: 10px;

[[SOLVED]]
Thanks for your help, but I found what the problem was.

I was rounding an image (probably should have specified this), and so the border rounding happened behind the image, i.e. the actual border was being rounded behind it, making it appear as though the border was thinner, or even transparent. By changing the image a little bit I managed to get the results I was looking for.

Thanks again everyone!
N.S.

Answer 1

Your rounded corners may also be affected by the browser’s implementation of the CSS3 properties, background-origin and background-clip.

The background-origin property is used to determine how the background-position of a background in a certain box is calculated. The background-clip property is used to determine whether the backgrounds extends into the border or not.

The following screenshot demonstrates the differences the two properties have on backgrounds and borders, which may be affecting your rounded corners.

The first row uses background-clip: border-box, while the second row specifies background-clip: padding-box.