CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS3 border-top-right-radius Attribute CSS border-top-color Attribute

CSS3 border-top-left-Usage and examples of the 'radius' property

border-top-left-The 'radius' CSS property sets the 'top-left corner' of the element border to be rounded.

The following table describes the usage and version history of this property, as well as the syntax for using this property in JavaScript scripts.

Default value:	0
Applies to:	All elements
Inheritance:	None
Animation can be made:	Yes.Please refer to Animation Attribute.
Version:	CSS3new feature
JavaScript syntax:	object object.style.borderTopLeftRadius="8px"

Note:border-top-left-radius will make the element's background rounded even if the border is not defined or its value is set to none.

border-top-left-radius syntax usage

The syntax of this attribute is as follows:

border-top-left-radius: [ length | percentage ]1　or　2　values | initial | inherit

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

The optional second length value defines the vertical radius of the upper left corner, so the shape of the corner 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 a square instead of a rounded corner.

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

Example

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

Test See‹/›

Attribute Value

The table below describes the value of this attribute.

Value	Description
length	Length values in units such as px, pt, cm, em, etc., but negative values are not allowed.
percentage	The size of the radius, in percentage. In the case of two values, the first value is calculated as a percentage of the width of the element box (i.e., the horizontal radius), and the second value is calculated as a percentage of the height of the element box (i.e., the vertical radius). Negative values are not allowed.
initial	Set this attribute to its default value.
inherit	If specified, the associated element adopts its parent element's border-top-left-The value of radius attribute.

Browser Compatibility

border-top-left-Browser Compatibility of radius attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

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