title: Use background-color of parent as box-shadow color
body: <p>I'm trying to create an "enhanced" radio button by use of an inset <code>box-shadow</code>.</p>
  
  <p><a href="http://codepen.io/selbekk/pen/NxXNoK?editors=110" rel="nofollow">Here's a CodePen of what I got so far</a></p>
  
  <p>What I'm trying to do is to make the background of the <code>.radio-button</code> <code>&lt;div /&gt;</code> be used as the color of the <code>box-shadow</code>. In my current solution, the color is set to <code>#fff</code>, which works on a white background, but not when the background is gray.</p>
  
  <ul>
  <li>Setting it to <code>currentColor</code> sets the color of the box shadow to the <code>border-color</code> value, which is <code>#333</code>;</li>
  <li>Setting it to <code>inherit</code> seems to disable the box-shadow, at least in Chrome. Makes sense in a way I guess, i'm assuming <code>inherit</code> doesn't work for parts of a property like here.</li>
  <li>Not setting it at all defaults it to the value of <code>color</code>, which is black.</li>
  </ul>
  
  <p>Is there a way to achieve what I want to do without JavaScript?</p>