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%;
}

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!