Rounded corners in Chrome do not work

Question

I use the following to achieve rounded corners:

-moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius: 10px; 

This works in all browsers (except IE, though) except Chrome. Here's what it looks like in Chrome:

but the same page is displayed in Safari. Being Webkit browsers, why is there a difference between the two browsers? This is what Safari looks like:

Why is this happening?

Here is the inscription I use:

HTML:

 div#one1 { position: relative; border-bottom: solid 2px #2D2DFF; width: 800px; height: 100px; color: #FFF; -moz-border-radius-topleft: 10px; -moz-border-radius-topleft: 10px; border-radius-topleft: 10px; border-radius-topleft: 10px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3); } 

 <div id="one1"> this is one event that is going to happen..... <br />and then the other....... <br /> </div> 

Answer 1

This is a bug with the Skia graphics library used by Chrome. It plays on Windows and Linux ...

but today it is fixed and available in the dev channel! (It will be between 4 and 10 weeks when he goes to everyone in a stable channel)

More details: http://paulirish.com/2011/chrome-inset-box-shadow-bug-fixed/

Answer 2

Try:

 border-radius: 10px; border-right-radius: 0; -moz-border-radius: 10px; -moz-border-right-radius: 0; -webkit-border-radius: 10px; -webkit-border-right-radius: 0; -o-border-radius: 10px; -o-border-right-radius: 0; 

Answer 3

To update this question

the border-radius property no longer needs a prefix,

  <strike>-moz-border-radius-topleft: 10px;</strike> <strike>-moz-border-radius-topleft: 10px;</strike> border-radius-topleft: 10px; border-radius-topleft: 10px; <strike>-webkit-border-top-left-radius: 20px;</strike> <strike>-webkit-border-top-right-radius: 20px;</strike> 

Also, your ad was missing a hyphen (-):

So,

  border-radius-topleft: 10px; border-radius-topleft: 10px; 

becomes:

  border-top-left-radius: 10px; border-top-left-radius: 10px; 

DEMO:

 div { height: 200px; width: 400px; background: tomato; border-top-right-radius: 10px; border-top-left-radius: 10px; } 

 <div></div> 

To further reduce CSS, you can declare your border radius in one line:

 border-radius: 10px 10px 0 0;