title: When border right and left color goes transparent, line appears in FF
body: <p>i created one half circle in css using border styles. To make circle, i gave border right and left colors transparent and it works fine in chrome but some line is coming inside circle in Firefox only. Anyone any idea about this ?</p>
  
  <p>here the link
  <a href="https://codepen.io/imarun/pen/ggOdoN" rel="nofollow noreferrer">codepen.io/imarun/pen/ggOdoN</a></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>body {
    font-family: 'Roboto', sans-serif;
    font-size: 64px;
  }
  
  .outer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
  }
  .outer p {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    background: antiquewhite;
    border-radius: 10%;
  }
  .outer p:hover .round:before {
    -webkit-transform: rotate(225deg) scale(0.5) translate(-10px, -10px);
            transform: rotate(225deg) scale(0.5) translate(-10px, -10px);
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.9);
  }
  .outer p:hover .round:after {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  .outer p:hover .dots:before,
  .outer p:hover .dots:after {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  
  .round {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 80px;
    top: 24px;
    border-radius: 50%;
    border: 1px solid black;
    border-right-color: transparent;
    z-index: 100;
  }
  .round:before {
    position: absolute;
    content: "";
    display: block;
    border: 25px solid grey;
    border-right-color: transparent;
    border-bottom-color: transparent;
    -webkit-transform: rotate(45deg) scale(1) translate(0, 0);
            transform: rotate(45deg) scale(1) translate(0, 0);
    -webkit-transition: -webkit-transform 0.5s ease-in;
    transition: -webkit-transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
    top: 0;
    border-radius: 50%;
    z-index: 90;
  }
  .round:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: -1px;
    left: -1px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-right-color: black;
    z-index: 99;
    -webkit-transition: -webkit-transform 0.5s ease-in;
    transition: -webkit-transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .round .dots {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .round .dots:before,
  .round .dots:after {
    position: absolute;
    content: "";
    top: 35%;
    left: 25%;
    width: 5px;
    height: 5px;
    background: black;
    border-radius: 50%;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transition: -webkit-transform 0.3s 0.7s ease;
    transition: -webkit-transform 0.3s 0.7s ease;
    transition: transform 0.3s 0.7s ease;
    transition: transform 0.3s 0.7s ease, -webkit-transform 0.3s 0.7s ease;
  }
  .round .dots:after {
    right: 25%;
    left: auto;
  }
  .round.round1 {
    left: 140px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;
  
    &lt;style&gt;
    &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;div class="outer"&gt;
    &lt;p&gt;FR
      &lt;span class="round"&gt;
        &lt;span class="dots"&gt;&lt;/span&gt;
      &lt;/span&gt;
  
      &lt;span class="round round1"&gt;
        &lt;span class="dots"&gt;&lt;/span&gt;
      &lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;!-- &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="285.333px" height="286.667px" viewBox="0 0 285.333 286.667" enable-background="new 0 0 285.333 286.667"
    xml:space="preserve"&gt;
  
    &lt;style&gt;
      svg *{
     -moz-transition:all 0.3s ease-out;
     -o-transition:all 0.3s ease-out;
     -webkit-transition:all 0.3s ease-out;
      transition:all 0.3s ease-out;
       }
  
      svg:hover .cutpart{
       transform: translate(62px);
      }
    &lt;/style&gt;
  
  &lt;g&gt;
   &lt;path fill="none" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" d="M281.258,142.812
    c0-76.62-62.113-138.732-138.732-138.732S3.793,66.192,3.793,142.812s62.113,138.732,138.732,138.732
    c31.112,0,59.832-10.241,82.972-27.536"/&gt;
   &lt;path class="cutpart" fill="none" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" d="M225.498,254.008
    c24.46-18.281,42.687-44.444,50.916-74.724c3.158-11.622,4.844-23.85,4.844-36.472"/&gt;
   &lt;circle fill="#FFFFFF" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" cx="89.147" cy="94.967" r="10.058"/&gt;
   &lt;circle fill="#FFFFFF" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" cx="197.147" cy="94.967" r="10.058"/&gt;
   &lt;path fill="#2375AD" stroke="#3FA9F5" stroke-miterlimit="10" d="M68.765,164.833c0,41,33.024,73.761,73.761,73.761
    c40.737,0,73.761-32.761,73.761-73.761H68.765z"/&gt;
   &lt;path fill="#144F70" d="M81.765,170.833c0,33,27.203,60.761,60.761,60.761c33.557,0,60.761-27.761,60.761-60.761H81.765z"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt; --&gt;</code></pre>
  </div>
  </div>
  </p>