0

CSS Border Radius

CSS Border Radius the border-radius property is a shorthand property for setting the four sides border radius properties. Border radius property allows you to add rounded borders to elements. Border Radius only works for latest web browsers, and on different sides different border radius can be applied. Here is syntax for border radius and example code of border radius.

Syntax of CSS Border Radius

Border radius will be applied to all corners, if you want to apply separate border radius on each corner then you can use next code snippet.

[css] border-radius: length;
[/css]

Different Border Radius on different sides

You can apply Different borders on each corner. For top left side border radius css code is

[css] border-top-left-radius: length;
[/css]

For top right side border radius css code it :

[css] border-top-right-radius: length;
[/css]

For bottom right border radius css code is :

[css] border-bottom-right-radius: length;
[/css]

For bottom left border radius css code is :

[css] border-bottom-left-radius: length;
[/css]

Apply two different lengths for one side

Here is sample code for applying two different lengths for one side

[css] border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
[/css]

Supporting other Browsers

W3C Specification

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

For Mozilla Firefox Browser :

-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

For webkit based browsers :

-webkit-border-radius
-webkit-border-radius-topleft
-webkit-border-radius-topright
-webkit-border-radius-bottomright
-webkit-border-radius-bottomleft

I hope this article helped you to learn about CSS Border Radius, if you have any problem let me know using below comment form.