Tutorial - Rounded corners w/o images pure CSS

[snowmanrene]

The newest versions of Opera, Safari and Chrome support the
border-radius property.

SO there's no need for the
-webkit-border-radius: 20px;
Firefox and IE are the only ones that need an extra line atm.

To prove:
I coded a simple proxy design, here's the code I used and screenshots from each browser.

#main {
    background: #fff;
    width: 590px;
    min-height: 250px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    padding: 10px;
    padding-top: 20px;
    color: #888;
    font-size: 12px;
}

#input {
    background: #e7e7e7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #9c9c9c;
    padding: 10px;
    font-size: 12px;
}

#main is the white area.
#input is the text input to type the url.

in Firefox 3.6.10


in Google Chrome 6.0.472.63


in Apple Safari 5.0.2


in Opera 10.63

snowmanrene Reviewed by snowmanrene on 16th Oct 2010. Tutorial - Rounded corners w/o images pure CSS The easy part ? Firefox, Safari & Chrome It?s best to avoid hacks if at all possible, and luckily Firefox, Safari and Chrome all support rounded corners through native CSS methods. Let?s apply a border-radius of 20 pixels to everything with the class ?rounded-corners?: .rounded-corners { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } Rating: 5

[Ornlu]

The newest versions of Opera, Safari and Chrome support the
border-radius property.

But there are people with outdated browsers too