CSS label 3 Tour: Border Radius

06Mar09

Border-radius allows you to create rounded corners with just CSS without the need for graphics or JavaScript. If you are not using it yet here’s an explanation.

Rounded Corners

Historically rounded corners were tricky to implement involving a background graphic or even JavaScript. Interface designers would issue a little sigh as designers littered designs with rounded corners. Well not any more!

Corners for all

Now you can create rounds corners easily using CSS. There is a bit of variance between browser vendors at the moment but I imagine eventually the syntax will standardise. To add rounded corners you just need:

/* Gecko browsers */
-moz-border-radius: 5px;
/* Webkit browsers */
-webkit-border-radius: 5px;
/* W3C syntax - likely to be standard so use for future proofing */
border-radius:10px;

And that’s all there is to it. Firefox did have some problems aliasing the corners but this has been fixed now so you can enjoy crisp rounded corners with no effort.

More Control

You can even specify which corners have border-radius applied to them. Again the syntax is slightly different between browsers so you’ll need to list both.

/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;

/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;

/* W3C syntax */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius:  20px;

VALIDATION:

True – this won’t validate with CSS 2.1 validators simply becuase this isn’t CSS 2.1. If you are a validation obsessive then I suggest putting these rules in a separate CSS3 file. If you can’t handle having *any* non-validating code on your site then you’d better wait a bit longer.

Browser Support?

Border-radius is supported in Firefox 2 & 3, Safari 3 and related Gecko and Webkit browsers.

Internet Explorer 6 & 7 and 8 (as far as I know) and Opera do not support rounded corners. Instead these users will see a regular corner.

source

Filed under: CSS Tutorial   |  1 Comment
Tags: CSS design, CSS Tutorial, CSS3 Border Radius

Review some DotNetNuke websites designed by Ray Creations

05Mar09

Filed under: Uncategorized   |  1 Comment