How can I use rounded borders with CSS?

Question

Is there a way in the newer CSS standards to provide round borders? It is not possible in CSS level 2.

Answer 1

Yes. CSS3 already has it.

Many browsers already have it.

• In Mozilla/gecko browsers you need -moz-border-radius though they are transitioning to border-radius.
• In Safari/Chrome/webkit browsers you need -webkit-border-radius.
• IE9 and above need border-radius (IE8 and below don't support it at all).
• In the future when CSS3 is widely adopted you'll just need border-radius in all browsers.

At the moment it's a good idea to use all three, plus -o-border-radius if you're worried about Opera.