CODEWITHSUNDEEP
css
Alex Berg
Alex Berg

Reputation: 747

CSS3 border radius problem with Chrome, Opera, Safari

I ran into this problem when trying to add rounded corners to some divs and can't seem to find the solution. I'm using this css for the class assigned to the divs:

-moz-box-shadow: 0px 5px 5px #cccccc;
-webkit-box-shadow: 0px 5px 5px #cccccc;
box-shadow: 0px 5px 5px #cccccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

The following is how it shows up in Chrome, Safari and Opera:

Chrome, Opera, Safari output

And here is how it displays in Firefox and IE9:

Firefox, IE9 output

It looks as if the background in Chrome and the others somehow clip over the the background color in the top border. The only css associated with the colored top border is:

border-top:8px solid #333333;

Any ideas?

Upvotes: 0

Views: 2395

Answers (2)

mingos
mingos

Reputation: 24502

Check this fiddle in various browsers:

http://jsfiddle.net/QVS9X/

When you remove border-radius, everything goes back to normal. You may have discovered a bug in Webkit and Opera implementations of border-radius. Check if it hasn't been reported and if not, you might want to report it :).

[EDIT]

I'm quite certain this is a bug.

  1. It only manifests itself in Chrome & Opera
  2. The bug looks different in Chrome and Opera
  3. The buggy part is related only to the width of the border that exceeds the value of border-radius (ie, for border-radius:10px and border width 10px, it's fine)
  4. The correctly rendered part is as wide as the value of border-radius.

I'm positive it should be reported to both the Opera and Webkit teams.

Upvotes: 2

BoltClock
BoltClock

Reputation: 723598

This, I suspect, is an issue with how browsers choose to render boxes that have partial borders as well as border-radius. I don't think it's something you can fix on your own (try setting white borders for the other sides? I don't know if that'd work though) without some entirely different method.

There is some sort of standard being drafted in the spec (in particular, §5.4 Color and Style Transitions) as to how exactly box borders with corner radii should be rendered, if you're inclined to take a look at it. But in the end, it's up to the browser how it'll draw borders and round corners, and consistent behavior across platforms will be difficult to achieve without cooperation.

Upvotes: 3

Related Questions