div의 반올림 된 아래쪽 테두리

Question

div의 아래쪽 테두리를 반올림하려합니다. CSS로 할 수 있습니까? 다음과 함께 모서리를 돌릴 수 있습니다.

border-bottom-left-radius : 50px;

나는이 문제를 해결하기 위해 노력하고 있습니다.

도움이된다면 크게 도움이 될 것입니다.

감사합니다.

Answer 1

물론 가능합니다. 오버레이 div.

http://jsfiddle.net/jprGx/3/

.outer { 
    width: 50px; 
    height: 50px; 
    position: relative; 
    border: #000 1px solid; 
} 

.inner { 
    position:absolute; 
    background: #fff; 
    height: 20px; 
    width: 50px; 
    bottom: -1px; 
    left: -1px; 
    border-left: #000 1px solid; 
    border-top: #000 1px solid; 
    border-right: #000 1px solid; 
    border-top-right-radius: 25px; 
    border-top-left-radius: 25px; 
}