CSS3: Rounded Corners

Philip — Tue, 26 Jan 2010 08:22:59 +0000

CSS3 has a few very useful features, such as: Rounded Corners. If you are using a CSS3 compatible browser, you will notice our current version of our site uses many rounded corners. They are all done with CSS3.

The following code works with Safari, Chrome and Firefox 2+. IE… is right out.

.rounded-corners {
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -khtml-border-radius-topleft:10px;
  -khtml-border-radius-topright:10px;
  -khtml-border-radius-bottomleft:10px;
  -khtml-border-radius-bottomright:10px;
  -moz-border-radius-topleft:10px;
  -moz-border-radius-topright:10px;			
  -moz-border-radius-bottomleft:10px;
  -moz-border-radius-bottomright:10px;	
}

You can also shorthand the Chrome and Firefox CSS3 corners. Safari does not play nice, so I usually use the full version for all three.

/* set all corners */
.rounded-corners {
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;	
}
 
/* or assign each corner clockwise starting top left */
.rounded-corners {
  -khtml-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
}

Riot Riot » Firefox

CSS3: Rounded Corners