Creating rounded corners using CSS [closed]

Answer 1

In Safari, Chrome, Firefox > 2, IE > 8 and Konquerer (and probably others) you can do it in CSS by using the border-radius property. As it's not officially part of the spec yet, please use a vendor specific prefix...

Example

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

The JavaScript solutions generally add a heap of small divs to make it look rounded, or they use borders and negative margins to make 1px notched corners. Some may also utilise SVG in IE.

IMO, the CSS way is better, as it is easy, and will degrade gracefully in browsers that don't support it. This is, of course, only the case where the client doesn't enforce them in non supported browsers such as IE < 9.