English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-left-The style CSS property is used to set the style of the left border of the element. However, in many cases, likeborder-styleOrborder-leftThis shorthand CSS property is more convenient and preferable to use.
The following table provides usage instructions and version history of this attribute, as well as the syntax used in JavaScript scripts.
Default value: | none |
---|---|
Applies to: | All elements |
Inheritance: | None |
Animated by: | No.See also Animation properties. |
Version: | CSS 1,2,3 |
JavaScript syntax: | object.style.borderLeftStyle="dashed" |
The syntax of this attribute is as follows:
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
This example demonstrates how to use border-left-style attribute.
p { border-left-style: dashed; border-left-width: 3px; }Test to see‹/›
The following table describes the value of this attribute.
Value | Description |
---|---|
none | No border is displayed. |
hidden | The same as none, the difference is that the table cell hasCollapsible borderAnd the two cells share the border. The hidden value ensures that the border is not drawn because its hidden priority is higher than all other border styles. |
dotted | Display the border as a series of dots. |
dashed | Display the border as a series of short line segments, that is, dashes. |
solid | Display the border as a single solid line. |
double | Display the border as two parallel solid lines, with a certain interval between them. The sum of the two lines and the space between them is equal toborder-widthvalue. |
groove | Display the border that is carved into the canvas. It gives the impression of3The impression of D, usually achieved by using a colorborder-colorTwo colors, lighter and darker, are created in the shadow to achieve this effect. |
ridge | Display the border that is the opposite of the effect, groove. It also gives a3The impression of D, the border looks as if it is coming out of the canvas. |
inset | Display makes the element's box look as if it is embedded in the canvas. It gives the impression of3D, this is usually achieved by creating a shadow with two colors, darker than the border colorborder-colorslightly brighter and darker. |
outset | Display the border that is the opposite of the effect, inset. It also gives a3The impression of D, the border makes the box look as if it is coming out of the canvas. |
inherit | If specified, the associated element uses its parent element's border-left-style attribute values. |
border-left-Browser compatibility of the style attribute, the numbers in the following table indicate the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.
|
Warning: Internet Explorer 7and earlier versions do not support value hidden. IE8Supported, but requires a.IE9and higher versions support the hidden value.
See tutorial:CSS Border,CSS3 Border.
Related attributes:border,border-style,border-left,border-left-color,
border-left-width.