Thursday, November 25, 2010

Rounded corners in css

CSS3 border-radius feature allows web developers can easily use the rounded corners of the design elements, images without corner, or use multiple div tags and is perhaps one of the most talked about aspects of CSS3.

Since it was first announced in 2005, the property Boder-ray has come to enjoy broad support from the browser (but with some differences) and relative ease of use, web developers have been quick to take full advantage of this emerging technology.

Here’s a basic example:
div.borderradius {
background-color: #eee;
    padding: 20px;
    margin-top: 10px;
    margin-right: 20px;
text-align: center;
border-radius: 15px;
-moz-border-radius: 15px;
}

<div class="borderradius">This box must have rounded edges to Firefox, Safari / Chrome, Opera and IE9.</div>

This results in


This box must have rounded edges to Firefox, Safari / Chrome, Opera and IE9.

No comments:

Post a Comment