CSS에서 요소의 왼쪽 상단 모서리를 둥글게 처리하려면 border-top-left-radius 속성을 사용합니다. 이 속성에 원하는 반지름 값을 지정하면 해당 모서리만 곡선 형태로 표시되며, 나머지 모서리는 그대로 유지됩니다.
아래 예제 코드를 실행하면 왼쪽 상단 모서리가 둥근 요소를 직접 확인할 수 있습니다.
예제 코드
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
border-top-left-radius: 45px;
background: #FADBD8;
padding: 20px;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorner">왼쪽 상단 모서리가 둥근 요소입니다!</p>
</body>
</html>코드 설명
border-radius: 25px;— 네 개의 모서리를 기본적으로 25px씩 둥글게 설정합니다.border-top-left-radius: 45px;— 왼쪽 상단 모서리만 별도로 45px로 지정하여 다른 모서리보다 더 크게 둥글게 만듭니다.background: #FADBD8;— 연한 분홍색 배경을 적용해 둥근 모서리를 시각적으로 쉽게 확인할 수 있도록 합니다.
참고 사항
border-top-left-radius는 하나 또는 두 개의 값을 가질 수 있습니다. 값이 하나면 수평·수직 반지름이 동일한 원형 곡선이 되고, 값이 두 개(예: 45px 20px)면 타원형 곡선으로 표현됩니다. 백분율(%) 값도 사용할 수 있어 반응형 디자인에 활용하기 좋습니다.