Set the style of the bottom border.
Syntax border-bottom-style: Style ;
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.
Examples:
h1 { border-bottom-style: double; }
.emw3class { border-bottom-style: solid; }
#emw3id { border-bottom-style: dotted; }
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 might fail to display 1px dashed borders.
“The love of one's country is a splendid thing. But why should love stop at the border?” ~ Pablo Casals
Related:
Border-bottom-style - MDN Web Docs.
border-style - Style all four borders.
border-left-style - Style of the left border.
border-right-style - Style of the right border.
border-top-style - Style of the top border.
border-bottom-width - Width of the bottom border.
border-bottom-color - Color of the bottom border.
color - text color.