<div class="container">

  <div class="el">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, laboriosam, nobis, et enim placeat ipsum asperiores eaque explicabo possimus ab fuga at unde. Atque dolores ut quia ex explicabo! Nulla.
    <div class="child">
      <p>
        I am the child element. I inherited the text color from my parent without having to explicitly use the <code>inherit</code> keyword. 
      </p>
      <p>
        I have the same border as my parent, but only because I have <code>border: inherit</code> applied to me. The <code>border</code> property is not normally inherited, but by using the <code>inherit</code> keyword, I was able to inherit all the border styles applied to my parent. The <code>inherit</code> keyword was applied to the shorthand property <code>border</code> as the only value.
      </p>
      <p>
        <a href="">I am a link</a>, the browser will style me according to its user agent style sheet. In order to get the same text color as my containing paragraph, try applying <code>color: inherit;</code> to me in the editor and see how that will enforce the text color inheritance on me.
      </p>
    </div>
  </div>
  <div class="el-2">
    <p>
      I have a pink border.
    </p>
    <div class="child-2">
      I did not inherit the pink border from my parent because the <code>inherit</code> value was passed to my shorthand <code>border</code> property as a value along with the other sub-property values.
    </div>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

.el {
  padding: 20px;
  color: #0099cc;
  border: 5px solid #0099cc;
}

.child {
  padding: 20px;
  margin-top: 20px;
  border: inherit;
}

.child a {
  /* try applying the inherit keyword here to inherit the same text color as the paragraph */
}

.el-2 {
  margin-top: 30px;
  padding: 20px;
  border: 5px solid hotpink;
}

.child-2 {
  border: 5px solid inherit;
  padding: 20px;
  margin-top: 20px;
}