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; }
.emw3class { border-style: solid dashed; }
#emw3id { 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-style - MDN Web Docs.
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.