title: border radius not round as expected
body: <p><a href="https://codepen.io/Antro/pen/mwLvzR" rel="nofollow noreferrer"><strong>codepen</strong></a></p>
  
  <p>In above example, I have tried switch box style and i have tried in em value,when i have written font size 16px based on their parents ,according veiwport there will be changes in font size while changing  switch box circle is not perfect ,For particular font size is suitable (eg:parent font-size 20px,22px)</p>
  
  <p>Here is the code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    font-size: 16px;
    text-align: center;
    margin-top: 10px
  }
  
  .BP_swtchbox {
    display: inline-block;
    font-size: 1em
  }
  
  .BP_Swtch {
    cursor: pointer;
    background: #d7d9dd;
    border-radius: 0.313em;
    height: 0.625em;
    width: 1.500em;
    display: inline-block;
    position: relative;
    transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s
  }
  
  .BP_swtchbox input {
    display: none
  }
  
  .BP_Swtbx_lb {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px 0 #777;
    height: 0.875em;
    width: 0.875em;
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
    -ms-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
    -moz-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
    -webkit-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
    bottom: 0;
    margin: auto
  }
  
  .BP_swtchbox input:checked+.BP_Swtch {
    box-shadow: 0 0 0 0.375em #58b14c inset
  }
  
  .BP_swtchbox input:checked+.BP_Swtch .BP_Swtbx_lb {
    left: calc(100% - 0.875em);
    left: -ms-calc(100% - 0.875em);
    left: -moz-calc(100% - 0.875em);
    left: -webkit-calc(100% - 0.875em)
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;label class="BP_swtchbox" for="BPSwitch"&gt;
      &lt;input type="checkbox" id="BPSwitch" class="hide"&gt;
        &lt;label class="BP_Swtch" for="BPSwitch"&gt;
          &lt;span class="BP_Swtbx_lb"&gt;&lt;/span&gt;
        &lt;/label&gt;
    &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the screenshot for  font size of 20px for parent  class.....for switch icon</p>
  
  <p><img src="https://i.stack.imgur.com/l8jxP.png" alt="enter image description here"></p>
  
  <p>What to do for that....</p>