English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-bottom-left-The 'radius' property in CSS is used to set the rounded corner style of the bottom right corner of an element. This corner can be circular or elliptical, and when the value is 0, it is a normal rectangular corner. The shape of the background, whether it is an image or a color, will be affected by this property.
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 |
|---|---|
| Applies to: | All elements |
| Inheritance: | None |
| Animatable: | Yes.Please refer to Animation properties. |
| Version: | CSS3new feature |
| JavaScript syntax: | objectobject.style.borderBottomRightRadius="3px" |
Note:border-bottom-left-Even if the border is not defined or the value is set to none, the radius attribute will make the element's background rounded.
The syntax of this attribute is as follows:
border-bottom-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 lower 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-bottom-left-radius attribute.
div {
border: 2px solid #f08080;
border-bottom-left-radius: 20px;
}Test to see‹/›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 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 property to its default value. |
| inherit | If specified, the associated element adopts its parent element's border-bottom-left-The calculated value of the radius attribute. |
border-bottom-left-The compatibility of the radius attribute in browsers, the numbers in the following table represent the minimum version number of the browser that supports this attribute, all mainstream browsers support this attribute.
|
Warning: Internet Explorer 8and earlier versions do not support border-bottom-left-radius CSS attribute is not supported in IE9and higher versions are supported.
See tutorial:CSS Border,CSS3 Border.
Related properties:border-radius,border-bottom-right-radius,border-top-left-radius,border-top-right-radius.