<div class="container">
  <p>
    All of the following boxes have a 3px solid black border. The outline is drawn outside the border. It has a <code>10px</code> width and a <code>deepPink</code> color.
  </p>
  <div class="element one">I have a solid outline.</div>
  <div class="element two">I have dotted outline.</div>
  <div class="element three">I have a dashed outline.</div>
  <div class="element four">I have a groove outline.</div>
  <div class="element five">I have a ridge outline.</div>
  <div class="element six">I have a double outline.</div>
  <div class="element seven">I have a inset outline.</div>
  <div class="element eight">I have a outset outline.</div>
</div>
body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  display: block;
  margin: 60px auto;
  max-width: 400px;
  padding: 20px;
  border: 3px solid black;
  background-color: white;
  text-align: center;
  outline-color: deepPink;
  outline-width: 10px;
}

.element:hover {
  background-color: #eee;
}

.one {
  outline-style: solid;
}

.two {
  outline-style: dotted;
}

.three {
  outline-style: dashed;
}

.four {
  outline-style: groove;
}

.five {
  outline-style: ridge;
}

.six {
  outline-style: double;
}

.seven {
  outline-style: inset;
}

.eight {
  outline-style: outset;
}