CSS Borders

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Borders

The CSS border properties specify the style, width, and color of an element’s border.

CSS Border Style

The border-style property defines the kind of border to be  displayed.

The following values are allowed:

  • dotted – Specifies a dotted border
  • dashed – Specifies a dashed border
  • solid – Specifies a solid border
  • double – Specifies a double border
  • groove – Specifies a 3D grooved border. The effect depends on the border-color value
  • ridge – Specifies a 3D ridged border. The effect depends on the border-color value
  • inset – Specifies a 3D inset border. The effect depends on the border-color value
  • outset – Specifies a 3D outset border. The effect depends on the border-color value
  • none – Specifies no border
  • hidden – Specifies a hidden border

The border-style property can have from one to four values:(for the top border, right border, bottom border, and the left border)

				
					<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</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>
CSS
				
					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;}

Output

css borders