CSS Borders
The CSS border properties
allow you to specify the style, width, and color of an element's border.
I have borders on all
sides.
I have a red bottom border.
I have rounded borders.
I have a blue left border.
CSS Border Style
The border-style property specifies what kind of border to
display.
The following values are
allowed:
- dotted - Defines a dotted border
- dashed - Defines a dashed border
- solid - Defines a solid border
- double - Defines a double border
- groove - Defines a 3D grooved
border. The effect depends on the border-color value
- ridge - Defines a 3D ridged
border. The effect depends on the border-color value
- inset - Defines a 3D inset border.
The effect depends on the border-color value
- outset - Defines a 3D outset
border. The effect depends on the border-color value
- none - Defines no border
- hidden - Defines a hidden border
The border-style property can have from one to four values
(for the top border, right border, bottom border, and the left border).
Example
Demonstration
of the different border styles:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Result:
A dotted
border.
A dashed
border.
A solid
border.
A double
border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border.
The effect depends on the border-color value.
An outset
border. The effect depends on the border-color value.
No
border.
A hidden
border.
A mixed border.
Note: None
of the OTHER CSS border properties (which you will learn more about in the next
chapters) will have ANY effect unless the border-style property
is set!
