CSS border-bottom-right-radius 속성이란?
웹 페이지에서 요소의 오른쪽 아래 모서리만 둥글게 처리하고 싶다면 border-bottom-right-radius 속성을 사용하면 됩니다. 이 속성은 CSS3에서 도입된 테두리 반경(border-radius) 계열 속성 중 하나로, 네 개의 모서리 중 오른쪽 아래 모서리만 개별적으로 제어할 수 있게 해줍니다.
속성 값은 픽셀(px), 백분율(%) 등 다양한 길이 단위로 지정할 수 있으며, 값이 커질수록 해당 모서리가 더 많이 둥글어집니다.
예제
아래 예제에서는 기본 border-radius 값을 25px로 설정한 후, border-bottom-right-radius를 90px로 지정하여 오른쪽 아래 모서리만 크게 둥글게 만듭니다. 코드를 실행하면 나머지 세 모서리와 대비되는 비대칭적인 둥근 모양을 확인할 수 있습니다.
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
border-bottom-right-radius: 90px;
background: #F5CBA7;
padding: 20px;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<p id = "rcorner">Rounded border bottom corner!</p>
</body>
</html>코드 설명
border-radius: 25px; — 요소의 네 모서리에 기본적으로 25px의 둥근 테두리를 적용합니다.
border-bottom-right-radius: 90px; — 오른쪽 아래 모서리만 90px로 더 크게 둥글게 만들어 나머지 모서리와 차별화된 디자인을 연출합니다.
background: #F5CBA7; — 연한 살구색 배경색을 지정하여 둥근 모서리 효과를 한눈에 잘 보이도록 합니다.
마무리
이처럼 border-bottom-right-radius 속성을 활용하면 특정 모서리만 선택적으로 둥글게 만들 수 있습니다. 같은 방식으로 border-top-left-radius, border-top-right-radius, border-bottom-left-radius 속성을 조합하면 각 모서리마다 서로 다른 곡률을 자유롭게 디자인할 수 있습니다.