This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
The CSS 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.
The property specifies what kind of border to display. The following values are allowed:
The property can have from one to four values (for the top border, right border, bottom border, and the left border).
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;}
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 mixed border.
From top going clockwise, the properties are dotted, dashed, solid and double.
Note: All the above border styles are set to to highlight the different border styles on a small screen like a smart phone.
Note Well: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the property is set!