테두리 반경을 설정할 때 요소의 CSS 드로잉 경계선

Question

제목이 이해하기 어려울 것으로 생각하므로 설명하겠습니다.
나는 (파일 .png을에서)이 효과를 달성하기 위해 노력하고 있어요 :

이 내가 상관없이이 내부 라인을 만들 수 없습니다 수

내부의 검은 색 선으로 반 사이클이를 어떻게 시도했다.

다음

#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; 
} 

그것은이다 DEMO

입니다

HTML

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

CSS :

이

은 내가 지금까지 무엇을 가지고 있습니다 매우 가깝지만 동일하지는 않습니다. 이 내부 라인을 만드는 방법에 대해 알아보십시오.

Answer 1

당신에 대한 의사 요소를 사용하고 그것을 경계 줄 수 :

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

거기에 해결책이 당신을 위해 작동합니다 바랍니다.

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; 
}