border-bottom-right-radius 속성은 요소의 오른쪽 하단 모서리를 둥글게 처리할 때 사용하는 CSS 속성입니다. 네 개의 모서리 중 특정 모서리만 곡률을 조정해야 할 때 유용하며, 픽셀(px)이나 백분율(%) 등 다양한 단위로 값을 지정할 수 있습니다.
기본 문법
border-bottom-right-radius: length | % | initial | inherit;
속성 값 설명
- length: px, em 등 절대 단위로 둥글기 정도를 지정합니다. 기본값은 0입니다.
- %: 요소의 크기를 기준으로 백분율 형태로 지정합니다.
- initial: 속성을 기본값(0)으로 초기화합니다.
- inherit: 부모 요소의 속성 값을 상속받습니다.
예제 코드
아래 예제는 오렌지색 배경의 요소에서 오른쪽 하단 모서리만 45px로 둥글게 처리한 결과입니다. 코드를 직접 실행하며 동작 방식을 확인해 보세요.
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
border-bottom-right-radius: 45px;
background: orange;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorner">둥근 모서리!</p>
</body>
</html>
실행 결과
먼저 border-radius: 25px; 선언으로 네 개의 모서리가 모두 25px씩 둥글게 설정됩니다. 그다음 border-bottom-right-radius: 45px; 선언이 오른쪽 하단 모서리만 더 큰 값인 45px로 덮어쓰기 때문에, 나머지 모서리와 차별화된 비대칭 둥근 모양이 완성됩니다.
이처럼 border-radius로 전체 모서리의 기본값을 지정한 뒤, 개별 모서리 속성으로 일부만 조정하는 패턴은 카드 UI, 말풍선, 배지 디자인 등에서 자주 활용됩니다.