html - Is it possible to create this shape (two partial circles joined together) with CSS?

Question

I was trying to accomplish this border for two divs with CSS:

I tried just using border-radius, but the two partial circles aren't pressed together: http://jsfiddle.net/uwz6L79w/

 .left {
   position: absolute;
   left: 0;
   top: 0;
   width: 100px;
   height: 100px;
   border-width: 4px;
   border-color: black white black black;
   border-style: solid;
   border-radius: 60px
 }
 .right {
   position: absolute;
   left: 104px;
   top: 0;
   width: 100px;
   height: 100px;
   border-width: 4px;
   border-color: black black black white;
   border-style: solid;
   border-radius: 60px;
 }

<div class="left"></div>
<div class="right"></div>

question from:https://stackoverflow.com/questions/33888529/is-it-possible-to-create-this-shape-two-partial-circles-joined-together-with-c

Answer 1

SVG

This is also possible using SVG.

The SVG version is very short as it mainly only requires an Arc command to control its shape, size and position.

<svg width="50%" viewbox="0 0 100 50">
  <path d="M50,35 
           a20,20 0 1,0 0,-20 
           a20,20 0 1,0 0,20z" 
        fill="white" 
        stroke="black">
  </path>
</svg>