<section class="container">
  <div class="item">solid/实线</div>
  <div class="item">dotted/点状</div>
  <div class="item">double/双线</div>
  <div class="item">groove/3D凹槽</div>
  <div class="item">ridge/3D垄状</div>
  <div class="item">inset/inset 边框</div>
  <div class="item">outset/outset 边框</div>
  <div class="item">dashed/虚线</div>
</section>

.container {
  background: #8ab4b7;
  float: left;
}
.item {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 10px;
  text-align: center;
  line-height: 150px;
  background: #5f92b1ba;
  border-width: 10px;
}
div:nth-child(1) {
  border-style: solid;
}
div:nth-child(2) {
  border-style: dotted
}
div:nth-child(3) {
  border-style: double;
}
div:nth-child(4) {
  border-style: groove;
}
div:nth-child(5) {
  border-style: ridge;
}
div:nth-child(6) {
   border-style: inset
}
div:nth-child(7){
  border-style: outset;
}
div:nth-child(8){
  border-style: dashed;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.