Border Radius

The CSS3 border-radius property lets you create rounded corners without the need for images or additional markup.

The basic syntax for the boder-radius:

border-radius: <border values>;

<border values> - One, two, three, or four values (px, em, or %) that indicate the size of a radius of a circle drawn at the corners of an elements box.

Values	Description
One Value	All corners
Two Values	<top-left and bottom-right> ,<top-right and bottom-left>
Three Values	<top-left>, <top-right and bottom-left>, <bottom-right>
Four Values	<border-top>, <border-right>, <border-bottom>, <border-left>

Examples:

snippet

border-radius: .5em;
border-radius: 15px 5px;
border-radius: 15px 5px 10px;
border-radius: 15px 10px 25px 5px;

Just like padding, margin, and border, you can adjust each value individually:

snippet

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

The -moz- prefixed form for older versions of Firefox uses a slightly different syntax:

snippet

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 40px;

Add a / followed by a second value to create an elliptical corner rather than a perfectly circular one.

The below example will create four equal, elliptical corners.

border-radius: 20px / 10px;

The below example will create four unequal, elliptical corners.

border-radius: 5px 10px 15px 20px / 10px 20px 30px 40px;

The border-radius property can be applied to all elements, except the table element when the border-collapse property is set to collapse.

Creating a round Corner button:-

snippet

input[type=submit] {
    -moz-border-radius: 10%;
    border-radius: 10%;
}

The above CSS have used an attribute selector to target the submit input type, and we’ve used percentages instead of pixel values for the rounded corners.