How can I create a round arrow with only HTML and CSS

Question

Using CSS and HTML, I'm attempting to make a rounded directional arrow. Here are my tries.

I've rotated the div> and an arrow in this, but they're both in different places.

Introducing the CSS:

 #curves div {
   width: 100px;
   height: 100px;
   border: 5px solid #999;
 }
 #curves.width div {
   border-color: transparent transparent transparent #999;
 }
 #curve1 {
   -moz-border-radius: 50px 0 0 50px;
   border-radius: 50px 0 0 50px;
 }
 .arrow-right {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 27px solid #ccc;
   float: right;
   margin-top: -7px;
   margin-right: -26px;
 }

<div id="curves" class="width">
  <div id="curve1"></div><span class="arrow-right"></span>
</div>