CSS BORDER-STYLE
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.
Example
strong {
border-style: groove inset solid none
}
some text
Possible Values
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.
Go Back