Css templates | CssTemplatesWeb

Css3 is around the corner, well, at least for non IE users. The new beta of Firefox (3.5b4) has built in feature for support, which allows us to test some of the new features in css3.
Let’s start by looking at one of these features, which is rounded corners

As you can see, Firefox has added those nice rounded corners, while IE has not. The html code for the above example:

<p class="roundedbox">The rounded box</p>

And the css code:

.roundedbox
{
        background-color: #0066cc; 
        color: #fff; 
        line-height: 20px; 
        width: 120px; 
        padding: 10px; 
        border-radius: 10px;
        -webkit-border-radius: 10px; 
        -moz-border-radius: 10px;
}

It’s only the 2 last lines in the css code that applies the rounded corners effect. The decleration of this css3 code will be border-radius, as seen in line number 3 from the bottom. But until this is in place, we need to use the 2 lines to tell the browsers to use prefixes. The first: -webkit- is for Safari, and the last one: -moz- is for Firefox.