CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS border-bottom-style attribute CSS3 border-bottom-left-radius attribute

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

border-bottom-right-The 'radius' property in CSS is used to set the rounded corner style of the bottom right corner of an element. This rounding can be circular or elliptical, and when the value is 0, it results in a sharp corner. The shape of the background, whether it's an image or a color, is affected by this property.

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

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

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

border-bottom-right-radius usage syntax

The syntax of this attribute is as follows:

border-bottom-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-bottom-right-radius attribute.

Example

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

Test to see‹/›

Attribute value

The following table describes the value of this attribute.

Value	Description
length	The unit of the length value can be px, pt, cm, em, etc., but negative values are not allowed.
percentage	The size of the radius, in percentage units. In the case of two values, the first value is calculated as a percentage relative to the width of the element box (i.e., the horizontal radius), and the second value is calculated as a percentage relative to the height of the element box (i.e., the vertical radius). 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-bottom-right-calculated value of the radius attribute.

Browser compatibility

border-bottom-right-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-bottom-right-radius attribute. In IE9and higher versions are supported.