Chrome & Opera Radio Box-shadow Is Square - Any Workaround?

Chrome and opera both have bug in the styling of radio inputs, so that the shadow appears around a square box, rather than the native element. Firefox: Chrome & Opera: Does a

Solution 1:

Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin.

<div class="radio_contain">
    <input type="radio" id="r1" name="r1">
</div>



.radio_contain {
  display: inline-block;
  border-radius: 100px;
  overflow: hidden;
  padding: 0;
}
.radio_contain input[type="radio"] {
  display: block;
  margin: 0;
}