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

Syntax:

CSS3 border-radius property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

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

Specifications

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 object.style.borderRadius=" 50px 40px "
Inherited No
Computed Value Same as declared value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.