CSS Border
CSS Border: The CSS border properties allow you to determine the style, width, and color of an element’s border.
The CSS border is a shorthand property used to set the border on an element.
CSS Border Style
The border-style property determines what sort of border to display.
The accompanying values are allowed:
• dotted – Defines a dotted border
• dashed – Defines dashed border
• solid – Defines a solid border
• double – Defines a double border
• groove – Defines a 3D grooved border. The impact relies upon the border-color value
• ridge – Defines a 3D ridge border. The impact relies upon the border-color value
• inset – Defines a 3D inset border. The impact relies upon the border-color value
• outset – Defines a 3D outset border. The impact relies upon 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:
The border-style Property
This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
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!
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
