CSS3 border radius problem with Chrome, Opera, Safari?

Check this fiddle in various browsers: 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 It only manifests itself in Chrome & Opera The bug looks different in Chrome and Opera 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) 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.

Check this fiddle in various browsers: 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. It only manifests itself in Chrome & Opera The bug looks different in Chrome and Opera 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) 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.

It looks really weird. Could there be a chance it's implemented like this on purpose? I find it hard to see why though... P.s.

Nice colorful box you made there :P – Alex Berg May 11 at 12:41 The colours are just there to see exactly which parts belong to which borders. I doubt this was made on purpose, as I can't see any apparent logic in how it behaves. – mingos May 11 at 17:03.

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.

Weird stuff going on. I read the links you provided and tried setting the top border height being equal or greater than the radius (in pixels). As in : border-top:8px solid #333333; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; That helped Opera but not Chrome and Safari... – Alex Berg May 11 at 12:43.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.