This property controls the line style of the left border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.
|
| Example | | strong { border-left-style: groove } this is a test |
| | Possible Values | |
| Value | Description | | inherit | Explicitly sets the value of this property to that of the parent. | | none | No border is rendered. This overrides any value of ‘border-width', if present. | | hidden | Creates the same effect as ‘none'. Only difference is for border conflict resolution for table elements. | | dotted | The border is rendered as a series of dots. | | dashed | The border is rendered as a series of short lines. | | solid | Renders a solid line. | | groove | Creates the effect of the border being grooved or carved in the rendering surface (A 3-D groove - the opposite of ‘ridge'.) The groove bevel color is rendered based upon the value of the ‘color' property. | | ridge | Creates the effect of the border being raised from the rendering surface (A 3-D ridge - the opposite of ‘groove'.) The ridge bevel color is rendered based upon the value of the ‘color' property. | | inset | Creates the effect of the border being embedded in the rendering surface (A 3-D inset.) The inset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘groove'. | | outset | Creates the effect of the border coming out of the rendering surface (A 3-D outset - the opposite of ‘inset'.) The outset bevel color is rendered based upon the value of the ‘color' property. A distinction exists between this value and ‘ridge'. | | double | A double line drawn on top of the background of the element. The two lines with the space between adds up to the value of the ‘border-width' property. |
|
|
|
|
|
