When New WordPress started using this i though you know Internet Explorer is definitely out now when i'm doing some css work that needs rounded corners I'm mostly using only this technique because buyers are ok with it although it's just for FireFox and Safari. And since most of people still don't know about this i figured it's good thing to share.

Of course i'm talking about 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

Update: I've just ran into border radius for opera (example -opera-border-radius: 10px;) but i haven't tested it yes, so i'm not sure it's working, anyway go to know.

Have some feedback? Leave a comment