Narendra Dhami

My Site

Archive for the ‘CSS’ Category

CSS 3 Rounded Corners

Posted by Narendra Dhami on August 20, 2008


Border-radius property for FireFox and Safari 3 (only). And here are some nice examples how to use it.

#box {
     background: #eee;
     border: 1px solid #ccc;
     padding: 15px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
}

And of course you don’t have to make all corners rounded, it can be just top left etc, so the code goes like this (small not, for example you can’t make rounded corners on images and stuff like that)

* -moz-border-radius-topleft and -webkit-border-top-left-radius
* -moz-border-radius-topright and -webkit-border-top-right-radius
* -moz-border-radius-bottomleft and -webkit-border-bottom-left-radius
* -moz-border-radius-bottomright and -webkit-border-bottom-right-radius

Advertisements

Posted in CSS | Leave a Comment »