Rounded corners in Chrome not working

问题:

I am using the following for achieving rounded corners:

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

This is working in all browsers (excluding IE though) except Chrome. Here is how it looks in Chrome:

but the same page is displayed fine in Safari. Being Webkit browsers why is there a difference in between these two browser displays? This is how it looks in Safari:

Why is this happening?

Here is the mark-up I am using:

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>

回答1:

This is a bug with the Skia graphics library that is leveraged by Chrome. It's reproduceable in Windows and Linux...

but as of today, it's fixed and available in the dev channel! (It'll be between 4 and 10 weeks when it goes to everyone in the stable channel)

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

回答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;

回答3:

To Keep this question updated

the border-radiusproperty no longer needs to be prefixed,

 <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>

And also, you were missing dashes (-) within your declaration:

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 reduce your CSS even further, you could declare your border radius in a single line:

border-radius: 10px 10px 0 0;