<div class="block none">
  border: 2px none #000;
</div>
<div class="block hidden">
  border: 1px hidden #000;
</div>
<div class="block dotted">
  border: 1px dotted #ff0000;
</div>
<div class="block dashed">
  border: 4px dashed pink;
</div>
<div class="block solid">
  border: 1px solid green;
</div>
<div class="block double">
  border: 10px double #666;
</div>
<div class="block groove">
  border: 1em groove #252525;
</div>
<div class="block ridge">
  border: thick ridge #909090;
</div>
<div class="block inset">
  border: medium inset lightblue;
</div>
<div class="block outset">
  border: thin outset rgb(0, 125, 125);
</div>
.block {
  width: 400px;
  height: 100px;
  margin: 16px auto;
  text-align: center;
  line-height: 100px;
  background-color: #eee;
  font-family: monospace;
  color: #222;
}

.none {
  border: 2px none #000;
}

.hidden {
  border: 1px hidden #000;
}

.dotted {
  border: 3px dotted #ff0000;
}

.dashed {
  border: 4px dashed pink;
}

.solid {
  border: 1px solid green;
}

.double {
  border: 10px double #666;
}

.groove {
  border: 1em groove #252525;
}

.ridge {
  border: thick ridge #909090;
}

.inset {
  border: medium inset lightblue;
}

.outset {
  border: thin outset rgb(0, 125, 125);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.