Rounded corners with css : border-radius

Border-radius

Rounded corners with CSS

div{ border-radius: 15px }

One of the great things in CSS3 are the new border options. Here we'll take a look at border-radius. Firefox, Safari and Chrome support this simple but great css property.

Example:

<div style="border-radius:5px; background: #bbb; width: 200px; height: 140px; padding: 20px;">This is a nice box</div>

This example will create the following box

This is a nice box

When using Firefox or Safari you should see a box with rounded corners. Internet Explorer users won't see the rounded corners because Internet Explorer doesn't support most of the newer css tags (hopefully future IE versions will change that).

Border-radius works very simular to the css border property. You can use it for all corners at once (border-radius:5px;) or for each corner separate: border-radius-topleft | border-radius-topright | border-radius-bottomleft | border-radius-bottomright.

Differences between browsers

Safari (and Chrome) and Firefox have their own interpretation of border-radius. That's why they use their own variant of border radius. Firefox uses -moz-border-radius (moz for Mozilla) and Safari/Chrome use -webkit-border-radius (Webkit is the rendering engine that Safari and Chrome use). Most recent version of Firefox and Safari do not need their specific variant, but if you want to be safe it is best to included the different variants in your css file:

.roundedCornerBox{ border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15x; }Alternative using images

If rounded corners are essential for your design you should still use images to create the rounded corners (for Internet Explorer). If it is only a slight enhancement than feel free to use this css property and give IE users another reason to upgrade their browser.

Alternative using jQuery

Another alternative is to use jQuery to create rounded corners. Read more about jQuery rounded corners on http://plugins.jquery.com/project/corners

Border-radius