Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 660
sasidhar Avatar asked Dec 17 '10 05:12

sasidhar


1 Answers

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/

like image 71
Paul Irish Avatar answered Oct 04 '22 12:10

Paul Irish