Search within TutorialsPark

CSS3 border-radius Property

A shorthand to specify the curved edges for a border

Definition and Notes.

1. The CSS border-radius is a shorthand to set the rounding radius of the corners of the element. The visual effect can be seen only if the element has a border, background color or image.

2. The order to specify the values for the shorthand border-radius is beginning from top-left corner and going clockwise.

3.The symbol "/" is used to seperate the horizontal and vertical values


CSS3 border-radius property. internetexplorer safari firefox opera chrome

View in Splitscreen»


Note-There must be same number of values before and after the slash(if used).

Property Values

Value Description
length Sets the radius of the curve using length values.
% Sets the radius of the curve using percentage values.
inherit The values are inherited from the parent elements calculated value


Specs Value
Name border-radius
Value [<length> | <percentage> ] {1,4} [ /[ <length> | <percentages>]{1,4} ] ?
Initial Value 0
Applies to All Elements except table elements where border-collapse is collapse
Javascript syntax" 50px 40px "
Inherited No
Computed Value Same as declared value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.