Border-Style

Set the style of the four borders. The four borders can be set individually or together using from one to four values:

Syntax
      border-style: Top  Right  Bottom  Left ;
border-style: Top   Right&Left  Bottom ;
border-style: Top&Bottom  Right&Left ;
border-style: AllBorders ;

To remember the order use the mnemonic TRouBLe or think of a clock face.

Border Styles:
none - No border and the computed border-width is zero.
hidden - No border, not even in a table where an adjacent (collapsed) cell exists.
dotted - A dotted border.
dashed - A dashed border.
solid - A solid border.
double - A double border. This does not make the border any wider.
groove - A 3D grooved border. The effect depends on the border-color value.
ridge - A 3D ridged border. The effect depends on the border-color value.
inset - A 3D inset border. The effect depends on the border-color value.
outset - A 3D outset border. The effect depends on the border-color value.
inherit - Inherit the border style from the parent element.

A thin (1px) dotted border with a color close to the surrounding content can be used to soften the normally sharp edge between blocks of content.

Examples:
h1 { border-style: solid double dashed dotted; }
.ss64class { border-style: solid dashed; }

#SS64id { border-style: solid; }

Try it:

This is a sample of text with a CSS border. Each of the 4 borders can be styled separately with CSS.

(CSS 1) Browser Support: All major browsers, IE 1.0 - IE 7 do not support hidden or inherit, IE 1.0 - IE 8 may fail to display 1px dashed borders.

“I don't want anyone reading my writing to think about style. I just want them to be in the story” ~ Willa Sibert Cather

Related:

border-color - Color of the four borders.
border-width - Width of the four borders.
border - Shorthand to set all border properties
color - Color of text
outline-style - Style of an outline.


© Copyright SS64.com 1999-2014
Some rights reserved