title: CSS circles look oval on ios
body: <p>I created a few circles using CSS that I use as text inputs on my HTML index page.
  Problem is that when the font inside is relatively large compare to the CSS circle, the circle turns into an oval.
  It only happens on IOS. I have tested the page on Safari and Chrome and it's perfectly fine. Don't have android devices to test.
  I have tried using meta flags and webkit properties but no go.</p>
  
  <p>Any hints?</p>
  
  <pre><code>            input[type=text5]{
                      position: absolute;
                      left: 270px;
                      top: 340px;
                      display:block;
                      width:50px;
                      height:50px;
                      line-height:50px;
                      border: 2px solid #f5f5f5;
                      border-radius: 50%;
                      margin:0 auto;
                      color:#f5f5f5;
                      text-align:center;
                      text-decoration:none;
                      background: #464646;
                      box-shadow: 0 0 3px gray;
                      font-family:Verdana;
                      font-size:16px;
                      font-weight:bold;
                      -webkit-box-sizing:content-box;
                      -moz-box-sizing:content-box;
                      box-sizing:content-box;             
              }
  </code></pre>
  
  <p>Large Font:
  <img src="https://i.stack.imgur.com/wdD8k.png" alt="enter image description here"></p>
  
  <p>Small Font
  <img src="https://i.stack.imgur.com/bPXBm.png" alt="enter image description here"></p>