둥근 모서리 테두리가있는 요소의 내용을 둥근 모양으로 만드는 방법은 무엇입니까?

Question

CSS3를 사용하여 투명한 회색 테두리 외에도 둥근 모서리가있는 흰색 상자를 얻으려고합니다. 이것이 가능한가?

HTML :

<div class="outer"><div class="inner"></div></div> 

CSS :

.outer{ 
    width: 300px; 
    height: 300px; 
    border: solid 10px; 
    border-radius: 5px; 
    border-color: rgba(0, 0, 0, 0.5);  
} 

.inner{ 
    border-radius 5px;  
} 

보너스 질문 : 무엇 크롬에 구석에 그 검은 사각형인가?

편집 : 나는 검은 사각형의 토론을 발견 Weird border opacity behavior in Webkit?

Answer 1

http://jsfiddle.net/XjsWZ/3/?

** 편집 **

I prefer JamWaffles' :

.outer{ 
    width: 290px; 
    height: 290px; 
    border: solid 10px; 
    border-radius: 15px; 
    border-color: rgba(0, 0, 0, 0.5); 
    background-clip:padding-box; 
    background-color:white; 
    padding: 5px; 
} 

아니면 different looking corners을 원하는 경우 다야의의 변형있다 :

.outer{ 
    width: 300px; 
    height: 300px; 
    background-clip:padding-box; 
    background-color: rgba(0,0,0,0.5); 
    border: solid 10px rgba(0,0,0,0.5); 
    border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/ 
} 

.inner{ 
    border-radius: 5px; 
    background-color: white; 
    height: 100%; 
} 

Answer 2

이 박스의 모양을 약간 수정 한 것입니다,하지만 경계 반경이 테두리의 폭보다 큰 경우, 당신은 내거야 둥근 모서리도.

예 here. 예를 들어, 둥근 효과를 내기 위해서만 둥지를 쓴다고 가정 했으므로 예제에서는 필요하지 않으므로 내부의 div을 제거했습니다.

black squares in the corners과 관련하여 Chromium 12에는 전혀 영향을주지 않습니다. RGBA 대신 일반 16 진수 색상을 사용해보세요. 현재 색상은 #808080이지만 반투명이 필요합니다. 이것은 Facebox 스타일의 팝업을위한 것입니까?

Answer 3

JamWaffles이 깨끗 대답은하지만 당신이 한 경우 중첩 된 div 태그와 반투명 경계를 사용하여이 작업을 수행하려면 배경색을 바깥 쪽 div를 테두리 색과 일치 시키려면 테두리와 배경이 겹치지 않도록 background-clip: padding-box;을 설정해야합니다.

예 : http://jsfiddle.net/XjsWZ/7/

CSS :

.outer{ 
    width: 300px; 
    height: 300px; 
    background-clip:padding-box; 
    background-color: rgba(0,0,0,0.5); 
    border: solid 10px rgba(0,0,0,0.5); 
    border-radius: 5px; 
} 

.inner{ 
    border-radius: 5px; 
    background-color: white; 
    display:block; 
    width: 100%; 
    height: 100%; 
} 

HTML :

<div class="outer"><div class="inner"></div></div> 

Answer 4

http://jsfiddle.net/XjsWZ/10/

기술적으로는하지만 좋은 해결책이 될 것 같이 보인다 테두리를 사용하십시오.

에게

는 CSS :

이

.outer{ 
    width: 300px; 
    height: 300px; 
    background-clip:padding-box; 
    background-color: rgba(0,0,0,0.5); 
    border: solid 10px rgba(0,0,0,0.5); 
    border-radius: 5px; 
} 

.inner{ 
    border-radius: 5px; 
    background-color: white; 
    display: block; 
    width: 280px; 
    height: 280px; 
    position: relative; 
    top: 10px; 
    left: 10px; 
} 

HTML :이 문제는 향후 검색 결과에 유용 할 경우

<div class="outer"><div class="inner"></div></div>