CSS Borders

Last Updated: March 28, 2022

CSS border property allows you to apply the border around the element and you can specify the style, color, and width of the border.

This sets the values of border-width, border-style, and border-color.

Syntax of the CSS border property

border: [border-width] border-style [border-color];
border : 1px solid #CCC

Types of border styles

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border : 1px solid #CCC Solid border with 1px width
border : 3px solid #CCC Dotted border with 3px width
border : 3px dashed #CCC Dashed border with 3px width
border : 3px double #CCC Double border with 3px width
border : 3px groove #CCC Groove border with 3px width
border : 3px ridge #CCC Ridge border with 3px width
border : 3px inset #CCC Inset border with 3px width
border : 3px outset #CCC Outset border with 3px width
Test