CSS BORDER STYLE

Before we discuss the CSS Border Style, we first have some knowledge of the css border because without the border applied no meaning of the css border style.

CSS Border Property display the border around the any html element.

div {
border: 2px solid blue;
}

 

CSS Syntax

border: border-width border-style border-color;

 
css border style
 

Now we come to the main point of the css border style property, There are many type of the border style and these are listed below.

border-style: solid;
border-style: double;
border-style: dotted;
border-style: dashed;
border-style: inset;

border-style: outset;
border-style: groove;
border-style: ridge;

See the some example listed below for the different css border style

Solid Border

<div style=”border-color: green; border-style: solid; border-width: 5px; font-family: arial; margin: auto; text-align: center; width: 200px;”>
Solid Border style</div>
Solid Border style

Dashed Border

<div style=”border-color: green; border-style: dashed; border-width: 5px; font-family: arial; margin: auto; text-align: center; width: 200px;”>
Solid Border style</div>
Dashed Border style

Dotted Border

<div style=”border-color: green; border-style: dotted; border-width: 5px; font-family: arial; margin: auto; text-align: center; width: 200px;”>
Dotted Border style</div>
Dotted Border style

Inset Border

<div style=”border-color: green; border-style: inset; border-width: 5px; font-family: arial; margin: auto; text-align: center; width: 200px;”>
Inset Border style</div>
Inset Border style

Outset Border

<div style=”border-color: green; border-style: outset; border-width:5px; font-family: arial; margin: auto; text-align: center; width: 200px;”>
Outset Border style</div>
Outset Border style

groove Border

<div style=”border-color: green; border-style: groove; border-width: 5px; font-family: arial; margin: auto; text-align: center; width: 200px;”>
Groove Border style</div>
Groove Border style

Above example will clear to you that how we can use the different style of CSS border to specific html controls.

Leave a Reply

Your email address will not be published. Required fields are marked *