CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS border-top-style Attribute CSS3 border-top-left-radius Attribute

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

CSS border-top-right-The 'radius' property sets the rounded corner shape for the 'upper right corner' of the element border.

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

Default value:	0
Applicable to:	All elements
Inheritance:	None
Animated production:	Yes.Please refer to Animation Attribute.
Version:	CSS3new feature
JavaScript Syntax:	object object.style.borderTopRightRadius="5px"

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

border-top-right-radius Syntax Usage

The syntax of this attribute is as follows:

border-top-right-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 right 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-right-radius Attribute.

Example

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

Test and See‹/›

Attribute Value

The following table describes the values of this attribute.

Value	Description
length	In length values 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 elements adopt the border of their parent element.-top-right-The Value of radius Attribute.

Browser Compatibility

border-top-right-Browser Compatibility of radius Attribute, the numbers in the following table 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+