CSS BORDER


The border property is used in CSS to set the style, color, and width of the border. Different properties can be set for all the different borders i.e. top border, right border, bottom border and left border.

Border Style


This property specifies the type of border. None of the other border properties will work without setting the border style.

Following are the types of borders:
  • 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
  • ridge - Defines a 3D ridged border
  • inset - Defines a 3D inset border
  • outside - Defines a 3D outside border
  • none - Defines no border
  • hidden - Defines a hidden border

For Example:


<!DOCTYPE html>
<html>
<head>
<style>
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;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>Displaying different types of borders <p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>
Live Demo!


Output:

The border-style Property

Displaying different types of borders

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 mixed border.