border-style

Support Key: [CSS1|CSS2] [IE4B1|N4B3|O3.5]
Other Border-Style Properties
border-top-style
border-right-style
border-bottom-style
border-left-style
= Index DOT Css by Brian Wilson =
  Main Index | Property Index | CSS Support History | Browser History  



   Quick Statistics   
Default Value:
none
Applicable Elements:
ALL
Inherit From Parent:
No
Applicable Media:
Visual
HTML Equivalent:
<img BORDER> | <table BORDER>
What is it?
This is a shorthand property which allows an author to specify 'border-top-style', 'border-right-style', 'border-bottom-style', and 'border-left-style' properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides.

Allowed Values
inherit
[CSS2] [NS6]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
none
[CSS1|CSS2] [IE4B1|N4B3|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
[CSS1|CSS2] [IE5.5B1|N6|O3.5]
Type: Explicit
Description:
The border is rendered as a series of dots.
dashed
[CSS1|CSS2] [IE5.5B1|N6|O3.5]
Type: Explicit
Description:
The border is rendered as a series of short lines.
solid
[CSS1|CSS2] [IE4B1|N4B3|O3.5]
Type: Explicit
Description:
Renders a solid line.
groove
[CSS1|CSS2] [IE4B2|N4B3|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
[CSS1|CSS2] [IE4B2|N4B3|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
[CSS1|CSS2] [IE4B2|N4B3|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
[CSS1|CSS2] [IE4B2|N4B3|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
[CSS1|CSS2] [IE4B2|N4B3|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.
-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.
Syntax
Selector { border-style: [style] {1,4} }
Example
Ext/Doc: strong { border-style: groove inset solid none }
In-Line:  <strong STYLE="border-style: dotted">this is a beautiful test</strong>
Notes Browser Peculiarities

Boring Copyright Stuff....