<div class="container">
    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.
  <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>
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;