CSS Rounded Corners Example

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3. It 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. Now it works in all browser so it is cross browser compatible.

Syntax

border-radius: top-left, top-right, bottom-right, bottom-left;

The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Examples

border-radius: 15px;

Tutorial Jinni

you can also use it like this

border-bottom-right-radius:15px;
border-top-left-radius:15px;

Tutorial Jinni

or you can individually assign radius to all the four corners.

border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;

Tutorial Jinni