CSS의 border-top-right-radius 속성은 요소의 오른쪽 상단 모서리만 둥글게 처리할 때 사용합니다. 네 개의 모서리 중 특정 모서리에만 곡률을 적용해야 하는 경우 유용하며, 픽셀(px), 퍼센트(%), em 등 다양한 단위로 값을 지정할 수 있습니다.
주요 문법과 값
기본적인 사용 방법은 다음과 같습니다.
border-top-right-radius: 값;
지정할 수 있는 주요 값은 아래와 같습니다.
- 길이 단위(px, em 등): 모서리 곡선의 크기를 절대값으로 지정합니다.
- 퍼센트(%): 요소 크기를 기준으로 백분율로 지정합니다.
- 0(기본값): 곡률 없이 직각 모서리가 유지됩니다.
예제 코드
아래 예제에서는 기본 border-radius를 25px로 설정한 뒤, border-top-right-radius 속성으로 오른쪽 상단 모서리만 45px로 더 크게 둥글게 처리했습니다.
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
border-top-right-radius: 45px;
background: orange;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorner">둥근 모서리 예제!</p>
</body>
</html>실행 결과
위 코드를 실행하면 주황색 배경의 사각형 요소에서 오른쪽 위 모서리만 다른 모서리보다 크게 둥근 형태로 표시됩니다. 이처럼 border-top-right-radius 속성을 활용하면 카드 UI, 말풍선, 배지 등 다양한 디자인 요소에서 원하는 모서리만 자유롭게 스타일링할 수 있습니다.