가이드라인

border-radius 심화

각 모서리마다 다른 크기를 지정하고 싶다면, 아래와 같이 border-radius 속성에 방향을 부여할 수 있습니다..

예를 들어 아래 CSS 코드는 box라는 클래스를 가진 요소의 왼쪽 위 모서리에 10px의 둥근 모서리를, 오른쪽 아래 모서리에는 20px의 둥근 모서리를 적용합니다.

특정 모서리에만 border-radius 적용하기
.box { border-top-left-radius: 10px; /* 왼쪽 위 모서리 */ border-bottom-right-radius: 20px; /* 오른쪽 아래 모서리 */ }

border-radius 값으로 %(퍼센트)를 지정하면 원형 또는 타원형 모서리를 만들 수 있습니다.

예를 들어 border-radius 값을 50%로 설정하면 요소의 모서리가 요소의 가로 길이의 50%만큼 둥글게 됩니다.

즉, 해당 요소는 원형이 됩니다.

border-radius 값으로 % 사용하기
.box { border-radius: 50%; }

위 CSS 코드는 box 클래스를 가진 요소의 모서리를 모두 둥글게 만들어 원형 모양을 만듭니다.

웹사이트의 프로필 이미지에 사용된 profile-image 클래스는 아래와 같이 border-radius 속성의 값으로 50%를 지정하여 이미지를 원형으로 만들었습니다.

프로필 이미지를 원형으로 만들기
.profile-image { border-radius: 50%; }

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말