overflow: hidden 속성 사용
부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이 부모 요소의 경계를 벗어나지 못하도록 만들 수 있습니다.
inline ad
.parent-div { border: 1px solid #A8C6DF; border-radius: 10px; overflow: hidden; /* 자식 요소의 배경을 가립니다 */ } .child-div { background-color: #E0E0E0; /* 자식 요소의 배경색을 설정합니다 */ }
자식 요소에도 border-radius 적용
부모 요소의 border-radius 값을 자식 요소에도 동일하게 적용하여, 자식 요소의 모서리가 부모 요소의 모서리와 일치하도록 만들 수 있습니다. 자식 요소가 부모 요소의 전체 크기를 차지하는 경우 유용합니다.
CSS clip-path 사용
더 복잡한 모양이나 특정 영역에서만 자식 요소의 background-color를 가리고 싶은 경우 clip-path 속성을 사용할 수 있습니다. 이 방법은 자식 요소의 배경을 부모 요소의 특정 형태에 맞춰 자를 때 유용합니다.
.child { clip-path: inset(0); /* 부모 요소의 border-radius에 맞춰 조정 가능 */ }
자식 요소에 background-clip 속성 사용
또 다른 접근 방법으로, 부모 요소에 border가 있고 자식 요소의 배경색이 이를 넘지 않게 하고 싶은 경우, 자식 요소에 background-clip: padding-box; 속성을 사용할 수 있습니다. 이 속성은 배경색이나 이미지가 border 영역을 넘어서지 않도록 합니다.
.child { background-clip: padding-box; }
참고문서
- MDN Web Docs CSS backgrounds and borders, border-radius
- CSS-Tricks: overflow
- OneNaught: CSS: inner elements breaking border-radius