How to use border radius in CSS

Border radius( usually we write border-radius ) is style attribute of css which uses for design the custom shapes using HTML element ( like div,span etc. ).

css syntax for border radius
border-radius: top-left corner radius , top-right corner radius , bottom-right corner radius , bottom-left corner radius ;

these all values we can gives in px(pixels), em(emphasize), %(percentages).

example :


.myborder{
border: 2px solid #000000;
border-radius : 5px 5px 5px 5px;
background-color:2c80c0;
}

Here we see that border-radius has four values for each corner of element, and some pair of values are same. If we have same radius values for the corners then we can short the code like as following-

* If one value is set, this radius applies to all 4 corners.
borderradius4corner
example :
.myborder{
border: 2px solid #000000;
border-radius : 5px;
}

Browser sets the values for each corner of element’s border –

border-radius: 5px 5px 5px 5px;

* If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
borderradius2corner
example :

.myborder{
border: 2px solid #000000;
border-radius : 5px 10px;
}

Browser sets the values for each corner of element’s border –

border-radius: 5px 10px 5px 10px;

* Three values: The second value applies to top-right and also bottom-left.
borderradius3corner
example :
.myborder{
border: 2px solid #000000;
border-radius : 5px 10px 0px;
}

Browser sets the values for each corner of element’s border –

border-radius: 5px 10px 0px 10px;

* Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
borderradius4_diffcorner
example :

.myborder{
border: 2px solid #000000;
border-radius : 5px 0px 10px 20px;
}

The minimum value we can set for the border-radius is 0, and maximum value depends on the size of the element.

There are several browsers and for getting perfect effect of border-radius style we use prefix with the border-radius style attribute according to browsers.

/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
expired sites .