[CSS] 이미지 테두리 둥글게 만들기

이미지의 모서리를 둥글게 만들면 부드러운 디자인을 연출할 수 있습니다.

CSS에서는 border-radius 속성을 사용하여 모서리의 둥글기 정도를 쉽게 조절할 수 있습니다.

이번 글에서는 다양한 border-radius 설정 방법과 응용 예제를 소개합니다.

border-radius 기본 사용법

border-radius 속성은 요소의 각 모서리를 둥글게 만드는 데 사용됩니다.

아래 예제에서는 이미지의 모든 모서리를 10픽셀 반경으로 둥글게 설정했습니다.

See the Pen Untitled by saladent (@saladent) on CodePen.

각 모서리를 개별적으로 조정하려면 border-radius 속성에 네 가지 값을 지정할 수 있습니다.

아래 설정에서는 이미지의 좌측 상단과 우측 하단 모서리만 둥글게 처리했습니다.