It's No Longer Hip to be Square

One of the great things about CSS3 is the ability to create rounded edges on borders on anything. Images, navigation items, tabs, you name it. No longer are we stuck with square boxes or complex developing to display rounded edges. Contrary to Huey Lewis and the News, its no longer hip to be square.

Border Radius

The border radius allows us to round the corners of elements using only CSS. Each corner is treated as a quarter ellipse, which is defined by a curve that is drawn between a point on the x-axis and a point on the y-axis. The ellipse can look like a quarter circle, or a stretched quarter circle.

To create a 10px border radius on all image corners use the following css:

img {border-radius: 10px;}

Sometimes you will need to style each corner differently.

General Syntax

div {border-v-h-radius: x y;}
div {border-top-right-radius: 5px 10px;}
div {border-top-left-radius: 5px 10px;}
div {border-bottom-right-radius: 5px 10px;}
div {border-bottom-left-radius: 5px 10px;}

If you want each corner to be a quarter circle of different sizes, you can used the shorthand styling. The radii starts at the top-left corner and rotates clockwise around the element.

Shorthand

div {border-radius: top-left, top-right, bottom-right, bottom-left;}
div {border-radius: 1px 2px 3px 4px;}

If you want each corner to have the same radius , there is an even shorter hand version.

Super Shorthand

div {border-radius: 5px;}

As you can see, there is a fair bit of options with border radius.  As long as you arent using Internet Destroyer (aka Internet Explorer), border-radius will work quite nicely.

You also may be wondering who Huey Lewis is.  Below may clarify things.

Huey Lewis And The News - Hip To Be Square