border-left-style property
Sets or retrieves the style of the left border of the object.
 |
Syntax
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | window-inset
Property values
none-
Initial value. Border is not drawn, regardless of any border-width.
dotted-
Border is a dotted line. This value is supported on the Macintosh platform, as of Internet Explorer 4.01, and on the Windows platform, as of Internet Explorer 5.5. It renders as a solid line on UNIX platforms, and on Windows systems running earlier versions of Internet Explorer.
hidden-
Internet Explorer 8 and later. Same as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
dashed-
Border is a dashed line.
solid-
Border is a solid line.
double-
Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the border-width value. The border width must be at least 3 pixels wide to draw a double border.
groove-
3-D groove is drawn in colors based on the value.
ridge-
3-D ridge is drawn in colors based on the value.
inset-
3-D inset is drawn in colors based on the value.
outset-
3-D outset is drawn in colors based on the value.
window-inset-
Same as inset with a thin outside border.
Property values
This property has no parameters.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value |
Standards information
- CSS Backgrounds and Borders Module Level 3, Section 4.2
Remarks
A border-width greater than 0 must be set for the border-left-style attribute to render.
Examples
The following examples use the border-left-style CSS property and the borderLeftStyle scripting property to specify the style of the left border.
This example uses a call to an embedded (global) style sheet to change the style of the left border from solid to groove when an onmouseover event occurs.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/border-left-style.htm
<head> <style> td { border-left-style: solid; border-width: 0.3cm; } .change { border-left-style: groove; } </style> </head> <body> <table> <tr> <td onmouseout="this.className=''" onmouseover="this.className='change'"> <img alt="sphere" src="sphere.jpg"> </td> </tr> </table>
This example uses inline scripting to change the style of the left border to groove when an onmouseover event occurs.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/borderLeftStyle.htm
<td onmouseover="this.style.borderWidth='0.5cm';
this.style.borderLeftStyle='groove'">
See also
Send comments about this topic to Microsoft
Build date: 11/29/2012
