How to Change HTML5 Color Input Inner Radius

Trying to make the native HTML5 color input into a simple round circle, seems like the border and padding can be manipulated which is a good thing, I am looking for a way to border-radius the inner color...

#color1{
  padding:10px;
  border:none;
  border-radius:10px;
}

#color2{
  background:none;
  border:none;
}

<input type="color" id="color1" />
<input type="color" id="color2" />

from How to Change HTML5 Color Input Inner Radius