 <p>Googling for "css customized radio buttons" yielded a lots of useful results, such as <a href="http://www.hongkiat.com/blog/css3-checkbox-radio/" rel="nofollow">this</a>, here is a <a href="http://jsfiddle.net/dghjLra2/" rel="nofollow">jsfiddle</a> based on that tutorial, code provided below. Obviously, this is kind of workaround solution rather than native way of styling the radio buttons which to my knowledge doesn't exist.</p> <p>HTML:</p> <pre><code>&lt;div class="radio"&gt; &lt;input id="male" type="radio" name="gender" value="male"/&gt; &lt;label for="male"&gt;Male&lt;/label&gt; &lt;input id="female" type="radio" name="gender" value="female"/&gt; &lt;label for="female"&gt;Female&lt;/label&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; font-size: 13px; } input[type=radio] { display: none; } label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottombottom: 1px; background-color: #aaa; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); } .radio label::before { border-radius: 8px; } input[type=radio]:checked + label::before { content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; } </code></pre>