Rounded corners in Chrome not working

Question

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:

alt text

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:

alt text

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>

If you want to get `border-radius` and `box-shadow` working in IE as well, check out http://css3pie.com — Spudley, Dec 17 '10 at 09:16

score 5 · Accepted Answer · answered Jan 06 '11 at 08:10

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/

score 1 · Answer 2 · answered Dec 17 '10 at 05:24

1

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;

answered Dec 17 '10 at 05:24

Macy Abbey

3,877
1
20
30

1

View the effects of the different browsers here: http://quirksmode.org/css/borderradius.html – Macy Abbey Dec 17 '10 at 05:25
Its the same with all the four corners..... in the images provided, i just showed one of the corners and i also tried your solution, but somehow chrome isn't rendering it right. I have spent hours trying to figure out what happened but couldn't find anything wrong with it... – sasidhar Dec 17 '10 at 05:44
1

When you remove the box-shadow rules do you get correctly rounded corners? – Macy Abbey Dec 17 '10 at 08:01
1

Known bug: http://stackoverflow.com/questions/2937731/box-shadow-and-border-radius-bug-in-chrome – Macy Abbey Dec 17 '10 at 08:02

score 0 · Answer 3 · answered Feb 16 '15 at 11:35

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;

Rounded corners in Chrome not working

3 Answers3

Linked