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.



Kalpesh Patel

Founder & Owner at Aarav Web Solutions . Working for business development related to Web Design & Development. Also working with client in India & for outsourcing projects. Visit our website Aarav Web Solutions to see more about completed projects for clients. Focus in product development and we have developed our two own product listed below: Classified Website In India and Deals & Offer Website In India