multiple border hack

Rending multiple borders with CSS3 box shadows.

by desandro

HTML

<div id="box"></div>

<div id="dot"></div>

CSS

div {
  width: 80px;
  height: 80px;
  border: 10px solid red;
  margin: 40px 0 80px 40px;
  -webkit-box-shadow:
    0 0 0 10px yellow,
    0 0 0 20px orange,
    0 0 0 30px blue
  ;
  -moz-box-shadow:
    0 0 0 10px yellow,
    0 0 0 20px orange,
    0 0 0 30px blue
  ;
  -o-box-shadow:
    0 0 0 10px yellow,
    0 0 0 20px orange,
    0 0 0 30px blue
  ;
  box-shadow:
    0 0 0 10px yellow,
    0 0 0 20px orange,
    0 0 0 30px blue
  ;
}

#dot {
  -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
          border-radius: 50px
}