CSS dessin bordure à l'intérieur d'un élément lorsque le rayon de la frontière est définie

Question

Je suppose que le titre est un peu difficile à comprendre, alors je vais vous expliquer.
Je suis en train de réaliser cet effet (de .png):

C'est un demi-cycle avec la ligne noire à l'intérieur

Je ne pouvais pas créer cette ligne intérieure peu importe comment je a essayé.

C'est ce que je suis arrivé à ce jour:

HTML

<div id='halfCycle'> 
    <div id='halfCycleInner'> 
    </div> 
</div> 

CSS

#halfCycle 
{ 
    width: 23px; 
    height: 43px; 
    background-color: #383838; 
    border-top-right-radius: 50px; 
    border-bottom-right-radius: 50px; 
    box-shadow: 2px 0 2px 0px #222; 
} 

#halfCycleInner 
{ 
    position: relative; 
    top: 1px; 
    right:0px; 
    width: 22px; 
    height: 41px; 
    background-color: #383838; 
    border-top-right-radius: 60px; 
    border-bottom-right-radius: 60px; 
    border-right-width: 1px; 
    border-right-color: #212121; 
    border-right-style: solid; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

Voici une DEMO

Il est très proche, mais pas la même chose. Toute idée comment faire cette ligne intérieure.

Answer 1

Vous pouvez utiliser un élément pseudo pour et lui donner la frontière:

DEMO

HTML:

<div id='halfCycle'></div> 

CSS:

#halfCycle 
{ 
    width: 23px; 
    height: 43px; 
    background-color: #383838; 
    border-top-right-radius: 50px; 
    border-bottom-right-radius: 50px; 
    box-shadow: 2px 0 2px 0px #222; 
    position:relative; 
    overflow:hidden; 
} 
#halfCycle:after{ 
    content:''; 
    position:absolute; 
    top:1px; right:1px; 
    width:42px; 
    height:39px; 
    border-radius:100%; 
    border:1px solid #000; 
} 

Answer 2

il y a une solution j'espère que cela fonctionnera pour vous.

DEMO

.halfCycle{ 
    background: #383838; 
    height: 42px; 
    width: 20px; 
    border:1px solid #202020; 
    border-radius: 0 60px 60px 0; 
    border-left: none; 
    position: relative; 
    box-shadow:5px 0px 5px 0px #222; 
} 
.halfCycle:after{ 
    content: '';border:1px solid #383838; 
    position: absolute; 
    height: 44px; 
    width: 21px; 
    left:0; 
    top:-2px; 
    border-radius: 0 60px 60px 0; 
    border-left:none; 
}