<!doctype html>
<html>
 <head>
  <title>CSS inheritance: border-color</title>
  <style type="text/css">
   .test { display: block; color: green; border: none;}
   .test .inner { border-color: inherit; border-style: solid; }
   .test2 {margin: 1em 0 0;}
   .test2 .inner {border-right-color: inherit; border-bottom-color: inherit; border-top-color: inherit;}
   .test3 {margin: 1em 0 0; border: 3px solid; }
   .test3 .inner {border-top: inherit; border-right: inherit; border-left: inherit; border-bottom: inherit; border-top-width: 3px; border-top-style: solid; border-right-width: 3px; border-right-style: solid; border-left-width: 3px; border-left-style: solid; border-bottom-width: 3px; border-bottom-style: solid;}
  </style>
 </head>
 <body>
  <div class="test">
   <div class="inner">
    <div class="text">
     This should have a green border.
    </div>
   </div>
  </div>
  <div class="test test2">
   <div class="inner">
    <div class="text">
     This too.
    </div>
   </div>
  </div>
  <div class="test test3">
   <div class="inner">
    <div class="text">
     This too.
    </div>
   </div>
  </div>
 </body>
</html>
