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.
Allowed Values
inherit
CSS2
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
none
CSS2 | IE4
| O3.5
Type: Explicit
Description:
No border is rendered. This overrides any value of 'border-width', if present.
hidden
CSS2 | O3.5
Type: Explicit
Description:
Creates the same effect as 'none'. Only difference is for border conflict
resolution for table elements.
dotted
CSS2 | O3.5
Type: Explicit
Description:
The border is rendered as a series of dots.
dashed
CSS2 | O3.5
Type: Explicit
Description:
The border is rendered as a series of short lines.
solid
CSS2 | IE4
| O3.5
Type: Explicit
Description:
Renders a solid line.
groove
CSS2 | IE4
| O3.5
Type: Explicit
Description:
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
CSS2 | IE4
| O3.5
Type: Explicit
Description:
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
CSS2 | IE4
| O3.5
Type: Explicit
Description:
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
CSS2 | IE4
| O3.5
Type: Explicit
Description:
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
CSS2 | IE4
| O3.5
Type: Explicit
Description:
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 for the
left side.
Example
Ext/Doc: strong {
border-left-style: groove }
In-Line: <strongSTYLE="border-left-style:
groove">this is a beautiful test</strong>
Browser Peculiarities
Internet Explorer
4.0:
- This property does not apply to input TYPE=checkbox/radio fields
- Applying border properties to list items skews the normal placement
of the marker
4.0+:
- This property does not apply to inline elements.
- The default 'border-style' for form fields and tables/table cells
is not "none."
- Using a 'border-style' of "double" with 'border-width' set to "thin"
produces a solid, thin border, not a double border.
Opera
3.5:
- Borders have no effect on images, tables, table cells and form fields.
- Using a 'border-style' of "double" with 'border-width' set to "thin"
produces a solid, thin border, not a double border.