title: Phantom Border on Element
body: <p>I have a filled circle and a child element. I want the child ele to be 'attached' to the circle on the left. But I don't want this ele to have a visible border on its right edge.</p>
  <p>I'm not sure why, but when these two eles are overlapped, the child ele has this faint kind of dashed border on the right.</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 {
    height: 900px;
    width: 1600px;
    zoom: 500%;
  }
  
  .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  
  .circle {
    position: absolute;
    /*   border: solid 3px black; */
    background: yellow;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    display: flex;
    align-items: center;
  }
  
  .arc {
    position: absolute;
    width: 29%;
    height: 25%;
    background-color: yellow;
    transform: translate(-68%, 15%) rotate(-24deg);
    border-radius: 100% 0% 0% 100%;
    /* Changing the last num to 0 gets rid
       of the phantom border..? */
    border-width: 3px 0px 3px 3px;
    border-color: black;
    border-style: solid;
    /* Padding 1px works to get rid of it when the element isnt rotated */
    padding: 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="circle"&gt;
      &lt;div class="arc"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/VwQzb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VwQzb.png" alt="Phantom Border" /></a></p>
  <p><a href="https://codepen.io/CoreyBuckley/pen/ZEWKMaZ" rel="nofollow noreferrer">https://codepen.io/CoreyBuckley/pen/ZEWKMaZ</a></p>
  <p>Help on why this is occurring and how to get rid of it is much appreciated!</p>