CSS의 border-top-right-radius 속성을 사용하면 요소의 오른쪽 상단 모서리를 둥글게 처리할 수 있습니다. 이 속성은 테두리 네 모서리 중 오른쪽 위 부분만 개별적으로 제어하고 싶을 때 유용하며, 픽셀(px)이나 백분율(%) 등 다양한 단위로 곡률을 지정할 수 있습니다.
예제
아래 코드를 실행하면 border-top-right-radius 속성이 실제로 어떻게 적용되는지 직접 확인할 수 있습니다.
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
border-top-right-radius: 45px;
background: orange;
padding: 20px;
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<p id = "rcorner">Rounded border-top-right corner!</p>
</body>
</html>
코드 설명
- border-radius: 25px; — 요소의 네 모서리 전체에 기본값으로 25px의 둥근 곡률을 적용합니다.
- border-top-right-radius: 45px; — 오른쪽 상단 모서리만 45px로 더 크게 둥글게 만들어 나머지 모서리와 차별화합니다.
- background: orange; — 배경색을 주황색으로 지정하여 둥근 모서리 효과가 눈에 잘 띄도록 합니다.
이처럼 border-top-right-radius 속성을 활용하면 카드, 버튼, 알림 창 등 다양한 UI 요소에서 특정 모서리만 자유롭게 스타일링할 수 있어 디자인의 유연성이 크게 향상됩니다.