이미지와 둥근 테두리가 있는 카드

위쪽에 이미지가 있고 아래쪽에 텍스트가 있고 모서리가 둥근 테두리가 있는 카드가 있는 경우 이미지의 모서리도 둥글지 않습니다. 이 문제를 해결하기 위해 다양한 방법을 찾았지만 답은 분명했습니다.

카드 설정

다음은 카드의 기본 설정입니다.

<div class="card one">
  <img src="https://placekitten.com/200/200" alt="Kitten">
  <p>Some card text here</p>  
</div>

귀여운 고양이 사진과 함께...

.card {
  border: 3px solid red;
  border-radius: 0.5em;
}

눈에 잘 띄도록 테두리를 크게 빨간색으로 했습니다. 이미지의 모서리가 테두리 위에 있는 것을 볼 수 있습니다.

해결책

.card {
  overflow: hidden;
}

한 줄이면 충분합니다. 돌이켜 보면 분명합니다. overflow: hidden 카드 가장자리 밖에 있는 모든 항목을 숨겨야 함을 의미합니다. 카드의 가장자리는 테두리 안쪽에서 시작합니다. 따라서 테두리에 맞게 이미지의 모서리를 잘라냅니다.