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.

ValuesDescription
One ValueAll 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.

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents