CSS의 border-top-left-radius 속성은 요소의 왼쪽 위(좌상단) 모서리를 둥글게 만들 때 사용합니다. 이 속성에 값을 지정하면 해당 모서리만 곡선 형태로 처리되며, 나머지 모서리는 원래 상태를 유지합니다.
주요 특징
- 픽셀(px), em 등의 길이 단위 또는 백분율(%)로 값을 지정할 수 있습니다.
- 값이 클수록 모서리가 더 많이 둥글어집니다.
- 개별 모서리만 조정해야 할 때 유용하며, 네 모서리를 한 번에 설정하려면
border-radius속성을 사용하는 것이 좋습니다.
예제 코드
아래 예제는 초록색 배경의 요소에서 왼쪽 위 모서리만 45px 크기로 둥글게 처리한 코드입니다.
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
border-top-left-radius: 45px;
background: green;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorner">Rounded corners!</p>
</body>
</html>코드 설명
위 코드에서 #rcorner 선택자는 먼저 border-radius: 25px;로 네 모서리 전체에 기본 둥근 값을 적용한 뒤, border-top-left-radius: 45px;를 통해 왼쪽 위 모서리만 더 큰 값으로 덮어쓰고 있습니다. 그 결과 나머지 세 모서리는 25px의 부드러운 곡선을 유지하고, 좌상단 모서리만 45px로 더 크게 둥글게 표현됩니다.
값 지정 방식
border-top-left-radius는 하나 또는 두 개의 값을 받을 수 있습니다.
- 값 하나: 수평 반지름과 수직 반지름이 동일하게 적용됩니다. 예:
border-top-left-radius: 45px; - 값 두 개: 첫 번째 값은 수평 반지름, 두 번째 값은 수직 반지름으로 타원 형태의 곡선을 만듭니다. 예:
border-top-left-radius: 45px 20px;
이처럼 border-top-left-radius 속성을 활용하면 버튼, 카드, 배너 등 다양한 UI 요소에서 원하는 모서리만 자유롭게 디자인할 수 있습니다.