Building Rounded Corners with CSS3`s -webkit-border-radius Property

To be frank, building rounded corners on WebKit-based browsers is very similar to performing the same task on browsers using the Mozilla rendering engine, with one subtle difference: in this case, to get the effect properly displayed on screen, it’s necessary to use the “-webkit-border-radius” property. For obvious reasons, this is pretty annoying, but it’s worth it to set up an example that shows how to create the effect, at least for demonstration purposes.

Having clarified that point, please pay attention to the following CSS fragment, which gives an HTML container a “rounded” touch through the pertinent “-webkit-border-radius” property:

<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;

}

</style>

Definitely, that wasn’t rocket science, right? As you can see, using the “-webkit-border-radius” property is nearly identical to working with its counterpart “-moz-border-radius,” so it’s not worthwhile to waste your time (and mine) explaining how the previous CSS snippet does its thing. To get the rounded corner effect up and running, however, it’s necessary to include the earlier set of styles in a web page.

That’s exactly what I’ll be doing in the last section of this tutorial, so go ahead and read the lines to come. We’re almost done taming those wild corners!