CSS Border Examples

CSS border styles

solid border

double border

grooved border

dotted border

dashed border

inset border

outset border

ridged border

solid border

double border

grooved border

dotted border

dashed border

inset border

outset border

ridged border

solid border

double border

grooved border

dotted border

dashed border

inset border

outset border

ridged border

solid border

double border

grooved border

dotted border

dashed border

inset border

outset border

ridged border

CSS code

Try it »
#demo p{
	border-width: 6px; 
	text-align: center; 
	width: 120px;
	height: 40px; 
	}
#demo p.solid {border-style: solid; } 
#demo p.double {border-style: double; } 
#demo p.groove {border-style: groove; } 
#demo p.dotted {border-style: dotted; } 
#demo p.dashed {border-style: dashed; } 
#demo p.inset {border-style: inset; } 
#demo p.outset {border-style: outset; } 
#demo p.ridge {border-style: ridge; } 
#demo p.hidden {border-style: hidden; }
#demo .c2 p {
	border-radius: 20px;
}

#demo .c3 p{
	border-color: #09C;	
}

#demo .c4 p{
	border-width: 4px 8px 8px 4px;
	border-color: #F9C #09C #09C #F9C;
}
.clear {clear: both;}

HTML code

<div id="demo">
  <div class="c1" style="float: left; width: 160px;">
    <p class="solid">solid border</p>
    <p class="double">double border</p>
    <p class="groove">grooved border</p>
    <p class="dotted">dotted border</p>
    <p class="dashed">dashed border</p>
    <p class="inset">inset border</p>
    <p class="outset">outset border</p>
    <p class="ridge">ridged border</p>
    <p class="hidden">hidden border</p>
  </div>
  <div class="c2" style="float:left; width: 160px;">
    <p class="solid">solid border</p>
    <p class="double">double border</p>
    <p class="groove">grooved border</p>
    <p class="dotted">dotted border</p>
    <p class="dashed">dashed border</p>
    <p class="inset">inset border</p>
    <p class="outset">outset border</p>
    <p class="ridge">ridged border</p>
    <p class="hidden">hidden border</p>
  </div>
  <div class="c3" style="float:left; width: 160px;">
    <p class="solid">solid border</p>
    <p class="double">double border</p>
    <p class="groove">grooved border</p>
    <p class="dotted">dotted border</p>
    <p class="dashed">dashed border</p>
    <p class="inset">inset border</p>
    <p class="outset">outset border</p>
    <p class="ridge">ridged border</p>
    <p class="hidden">hidden border</p>
  </div>
  <div class="c4" style="float:left; width: 160px;">
    <p class="solid">solid border</p>
    <p class="double">double border</p>
    <p class="groove">grooved border</p>
    <p class="dotted">dotted border</p>
    <p class="dashed">dashed border</p>
    <p class="inset">inset border</p>
    <p class="outset">outset border</p>
    <p class="ridge">ridged border</p>
    <p class="hidden">hidden border</p>
  </div>
  <div class="clear"></div>
</div>