CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS border-right attribute CSS border-left-width attribute

CSS3 border-Usage and examples of the radius attribute

border-The radius attribute sets the corner of the element to a rounded shape. It isborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusandborder-bottom-left-radiusAbbreviation of the attribute.

The following table describes the usage and version history of this attribute, as well as the syntax of its usage in JavaScript scripts.

Default value:	0
Applicable to:	All elements
Inheritance:	None
Animatable:	is.Please refer to Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object object.style.borderRadius="8px"

Note:border-Even if the border is not defined or the value is set to none, this attribute will make the element's background rounded.

border-radius usage syntax

The syntax of this attribute is as follows:

border-radius: [ length | percentage ]　1　to　4　values　
　\"-------------------------------/
　　　　　　　　　　　　First radii
/　[length | percentage]　1　to　4　values | initial | inherit
　　　\"------------------------------/
　　　　　　　　Second radii (optional)

This shorthand notation can take one, two, three, or four values separated by spaces.

If specifiedOne valueIt defines the radius of all corners.
If the value is specifiedTwo valuesThe first value is used for the top left and bottom right, and the second value is used for the top right and bottom left.
If the value is specifiedThree valuesThe first value is used for the top left, the second value is used for the top right and bottom left, and the third value is used for the bottom right.
If the value is specifiedFour valuesIf each value is specified, it will be applied to the border in the order of the top left, top right, bottom right, and bottom left.

The following examples demonstrate how to use the border-radius attribute.

Example

　　div {
　　　border:　2px solid #f08080;
　　　border-radius:　20px;
　　}

Test to see‹/›

Note:Optional second length value (in “ /The value at the beginning (”) defines the vertical radius of the corner, so the corner shape is a quarter ellipse. If the second length is omitted or equal to the second length, the corner shape is a quarter circle. If either length is zero, the corner is square rather than rounded.

Attribute value

The following table describes the value of this attribute.

Value	Description
length	In length values such as px, pt, cm, em, etc., negative values are not allowed.
percentage	The size of the radius, in percentage. If it is an elliptical corner, the horizontal radius percentage is calculated relative to the width of the element box, and the vertical radius percentage is calculated relative to the height of the element box. Negative values are not allowed.
initial	Set this property to its default value.
inherit	If specified, the associated element uses its parent element's border-The value of the radius attribute.

Browser compatibility

border-browser compatibility of the radius attribute, the numbers in the following table represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 5+ Opera 10.5+

Warning: Internet Explorer 8and earlier versions do not support this border-radius attribute in IE9and higher versions are supported.

For further reading

See tutorial:CSS Border,CSS3 Border.

CSS border-right attribute CSS border-left-width attribute