• Horizontal CSS Menus
• Vertical CSS Menus
• Image CSS
• Form CSS
• DIVs and containers
• Links & Buttons
• CSS3 demos
• Other
• Browse All

• Layouts Index
• Two Columns
• Three Columns
• Fixed layouts
• Liquid Layouts
• CSS Frames

• Free Graphics

• Image Optimizer
• FavIcon Generator
• Email Riddler
• htaccess Password
• .htaccess Banning
• Gradient Image Maker
• Button Maker
• Ribbon Rules
• DD Whois Service

CSS Library: DIVs and containers: CSS3 demos: Here

CSS3 Rounded Corners using border-radius

Among CSS3's handy new features is the border-radius property, which offers a clean and easy way of adding rounded corners to elements on the page. The rounded corner look can be applied to any or all four corners of an element, and even works with elements with a background image. Practically speaking border-radius is supported in FF3, Safari3, and Google Chrome, by way of vendor specific equivalent properties as they race to eventually just support border-radius. IE users (as of IE8) are out of luck at the moment unfortunately.

While the details of the official border-radius property are being worked out, the vendor equivalent properties for FF3.x, Safari 3.x, and Chrome that you can use right now are:

• -moz-border-radius: value
• -webkit-border-radius: value

Safari and Chrome both use the "-webkit-" version btw. For the time being, you should define both properties to cover your bases while browsers move to support the official version. "value" in this case can be a singular value (ie: 10px) that defines the radius of the border for all 4 corners, for example:

This causes all 4 corners of the element to be rounded. But what if you only want select corners to get the rounded effect? Individual border radius properties lets you do that, which are:

In Firefox, the -moz-border-radius property we saw at the beginning can in fact act as a shorthand property to all 4 individual border radius properties. Simply enter 4 separate values to affect each of the 4 corners. Safari unfortunately does not yet support such a shorthand. With this new found knowledge at hand, here's a link with tear shaped corners:

Notice in Firefox, I simply use a single property to define the radiuses of all 4 corners, while in Safari, I need to also use two of the individual border radius properties.

CSS3's border-radius property plays nicely with other CSS properties such as border and even CSS3 Box Shadows. The rounded corners will follow the new edges seamlessly. In the below example, I give a DIV with a background image both rounded corners plus box shadows: