CODEWITHSUNDEEP
cssborder
Sam 山
Sam 山

Reputation: 42865

How can I use rounded borders with CSS?

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

Upvotes: 4

Views: 272

Answers (4)

thomasrutter
thomasrutter

Reputation: 117343

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.

Upvotes: 5

alex
alex

Reputation: 490233

What Thomas Rutter said, plus here is a handy resource because WebKit and Gecko use different properties for things such as top-left.

Upvotes: 2

Pranay Rana
Pranay Rana

Reputation: 176896

Border-radius: create rounded corners with CSS!

This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9. The code for this example is, in theory, quite simple:

#example1 {
border-radius: 15px;
}

However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

Upvotes: 2

Robert
Robert

Reputation: 21388

It's in CSS 3.

border-radius: 4em;

http://www.w3.org/TR/css3-background/#the-border-radius

Upvotes: 4

Related Questions