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:
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.
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:
Not bad with just CSS!