CSS Border Properties

Border Property will set the border of an HTML element with it’s own width, style, color and radius.

these are various styles of the border, Following are the allowed values for border-style: property:

• 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

You can also write shorthand way of writing all properties in one go, syntax as follows:

Syntax: border: border-width, border-style, border-color;

Ex: border:5px dotted red;

HTML:

CSS:

.box1{

width:500px;
height:100px;
border:5px dotted red;
border-radius: 5px;

}
.box2{

width:500px;
height:100px;
border-width:5px;
border-style:solid;
border-color:green;
border-radius: 5px;

}
.box3{

width:500px;
height:100px;
border-width:5px;
border-style:double;
border-color:cyan;
border-radius: 5px;

}

Code Pen Ref: Code Pen Source code of above exampleEnable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×