CODEWITHSUNDEEP
google-chromecssrounded-corners
sasidhar
sasidhar

Reputation: 7752

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:

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>

Upvotes: 5

Views: 5207

Answers (3)

jbutler483
jbutler483

Reputation: 24559

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;

Upvotes: 0

Paul Irish
Paul Irish

Reputation: 49142

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/

Upvotes: 5

Macy Abbey
Macy Abbey

Reputation: 3887

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;

Upvotes: 1

Related Questions