title: Radio Button with rounded shadow on left in Chrome
body: <p>How do I make the radio button shadow to be rounded in Chrome like how it is displayed in IE?  Any help will be appreciated!</p>
  
  <p><strong>IE:</strong> (<em>like this</em>)</p>
  
  <p><a href="https://i.stack.imgur.com/tUdFN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tUdFN.png" alt="enter image description here"></a></p>
  
  <p><strong>CHROME:</strong> (<em>not like this</em>)</p>
  
  <p><a href="https://i.stack.imgur.com/IMHh8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IMHh8.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="radio"&gt;&lt;input type="radio"&gt;&lt;label&gt;C#&lt;/label&gt;&lt;/div&gt;    
  &lt;div class="radio"&gt;&lt;input type="radio"&gt;&lt;label&gt;Java&lt;/label&gt;&lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>input[type="radio"] {
      box-shadow: -4px 0 0 maroon; 
      border-radius: 10px;
  }
  </code></pre>
  
  <p><strong>JS FIDDLE:</strong></p>
  
  <p><a href="http://jsfiddle.net/nikib/b85zpgu5/" rel="nofollow noreferrer">http://jsfiddle.net/nikib/b85zpgu5/</a></p>