This property controls the line style of the top 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] [NS6]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
none
[CSS2]
[IE4|N6|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]
[IE5.5B1|N6|O3.5]
Type: Explicit
Description:
The border is rendered as a series of dots.
dashed
[CSS2]
[IE5.5B1|N6|O3.5]
Type: Explicit
Description:
The border is rendered as a series of short lines.
solid
[CSS2]
[IE4|N6|O3.5]
Type: Explicit
Description:
Renders a solid line.
groove
[CSS2]
[IE4|N6|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|N6|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|N6|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|N6|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|N6|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
top side.
-moz-bg-inset
[N6]
Type: Explicit
Description:
Mozilla proprietary value - authors should not use this value.
The same as the "inset" value, but the element's background color is used
to create the inset rendering instead of any border-color specified.
-moz-bg-outset
[N6]
Type: Explicit
Description:
Mozilla proprietary value - authors should not use this value.
The same as the "outset" value, but the element's background color is used
to create the outset rendering instead of any border-color specified.
Example
Ext/Doc: strong {
border-top-style: groove }
In-Line: <strongSTYLE="border-top-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+:
- 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.
- Applying a border-style of "double", "dotted" or "dashed" on the
BODY element produces a "solid" border style
- Applying borders to the BODY element puts the border outside
the canvas' scrollbars.
4.0-5.0:
- This property does not apply to inline elements.
5.5+:
- Beginning in 5.5 Beta 1, this property now applies to inline elements.
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.