What is the best way to create rounded borders that are cross browser compatible?

Question

Possible Duplicate:
Cross-browser curved borders

I would like to create divs and other elements that will contain designed borders. The borders will be basic CSS ready borders. While I can code it, I want to know the best method and process for making the rounded-borders attribute cross browser compatible. (At least among the largely accepted browsers (Chrome, Firefox, IE, Safari). Any pointers?

http://border-radius.com/ generates CSS with all necessary prefixes. Can use it as a reference. — keaukraine, Sep 19 '12 at 10:15

score 0 · Answer 1 · answered Sep 19 '12 at 13:28

0

  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;

Source

answered Sep 19 '12 at 13:28

LazyZebra

1,097
16
24

score 0 · Answer 2 · answered Sep 19 '12 at 13:49

The border-radius property is already supported in Internet Explorer (from version 9 up), Firefox (version 4 up), Chrome, Safari and Opera. However, if you want to be sure you can use something like this:

.border-radius {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Hope it helps.

score 0 · Answer 3 · answered Sep 19 '12 at 15:32

0

Take a look at this helpful site http://www.css3.info/preview/rounded-border/ It has explanations and working examples Also take a look at W3C advice. Very helpful http://www.w3.org/TR/css3-background/#corner-shaping

answered Sep 19 '12 at 15:32

medina

766
1
11
31

What is the best way to create rounded borders that are cross browser compatible?

3 Answers3