테두리 반경 CSS 속성 곡선 바깥 쪽

Question

바깥 쪽 테두리 반경 커브를 만드는 방법은 무엇입니까?

하판 부의 경계 반경 외측 곡선 싶다. CSS3로 어떻게 할 수 있습니까?

Answer 1

예, 추가 마크 업없이이 작업을 수행 할 수 있습니다. 다음과 같이 쓰기 :

CSS

.active{ 
    border:1px solid red; 
    border-bottom:0; 
    width:80px; 
    height:40px; 
    margin:30px; 
    position:relative; 
    -moz-border-radius:5px 5px 0 0; 
    -webkit-border-radius:5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
} 
.active:after, 
.active:before{ 
    content:''; 
    width:40px; 
    height:30px; 
    border:1px solid red; 
    position:absolute; 
    bottom:-3px; 
    border-top:0; 
} 
.active:after{ 
    border-left:0; 
    -moz-border-radius:0 0 5px 0; 
    -webkit-border-radius:0 0 5px 0; 
    border-radius: 0 0 5px 0; 
    left:-41px; 
} 
.active:before{ 
    border-right:0; 
    -moz-border-radius:0 0 0 5px; 
    -webkit-border-radius:0 0 0 5px; 
    border-radius: 0 0 0 5px; 
    right:-41px; 
} 

HTML

<div class="active">hi</div> 

확인 그래픽의 일부가 외부에 있기 때문에이 추가 마크 업없이 할 수 없습니다이 http://jsfiddle.net/p6sGJ/