Displaying Rounded Corners Built with CSS3 in a Wider Range of Browsers

As I explained in the section that you just read, there’s a simple way to render rounded corners in a larger number of browsers. Assigning at the same time the two custom “border-radius” properties to the same HTML element will to the trick, even though this is nothing but a quick and dirty approach which is very distant from following the CSS3 standard.

Anyway, achieving this is so easy that it’s worthwhile to make the effort. So, here are the CSS styles that introduce the enhancement mentioned before:    

<style type="text/css">

body {

    padding: 0;

    margin: 0;

    background: #fff;

    font: 1em Arial, Helvetica, sans-serif;

    color: #000;

}

#wrapper {

    width: 960px;

    margin: 0 auto;

}

#header, #content, #footer {

    padding: 30px;

}

.rounded_container {

    width: 400px;

    padding: 20px;

    background-color: #39f;

    -webkit-border-radius: 2em;

    -moz-border-radius: 2em;

}

</style>

Done. With this subtle modification, any HTML element that has the above “rounded_container” CSS class assigned to it will be rendered with rounded corners on WebKit and Mozilla-based browsers. Considering that achieving this required to write only one additional CSS declaration, the result is definitely more than acceptable.

Naturally, to see the impact introduced by this small change more clearly, we need to include the previous CSS styles in a web page. That’s exactly what I plan to do in the next segment. So click on the link below and read the next few lines.