<div class="container">
  <p>
    All of the following boxes have a 3px solid black border. The outline is drawn outside the border.
  </p>
  <div class="element one">I have a deepPink outline.</div>
  <div class="element two">I have an outline specified as a hexadecimal value.</div>
  <div class="element three">I have a translucent black outline.</div>
  <div class="element four">My outline has the default color. Try changing the background color; if the outline color changes accordingly then your browser supports pixel color inversion using the <code>invert</code> keyword.</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-style: solid;
  outline-width: 5px;
}

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

.one {
  outline-color: deepPink;
}

.two {
  outline-color: #0099CC;
}

.three {
  outline-color: rgba(0, 0, 0, 0.5);
}