CSS border-bottom-left-radius 속성이란?
HTML 요소의 왼쪽 하단 모서리를 둥글게 처리하려면 CSS의 border-bottom-left-radius 속성을 사용합니다. 이 속성에 값을 지정하면 해당 모서리만 곡선 형태로 변형되며, 나머지 세 개의 모서리는 원래 상태 그대로 유지됩니다.
border-radius 속성으로 네 모서리 전체에 둥근 처리를 한 뒤, border-bottom-left-radius 속성을 추가로 지정하면 특정 모서리만 다른 값으로 조정할 수도 있습니다.
아래 예제 코드를 직접 실행해 보면 border-bottom-left-radius 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다.
예제
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
border-bottom-left-radius: 45px;
background: blue;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorner">Rounded corners!</p>
</body>
</html>코드 설명
- border-radius: 25px; — 요소의 네 모서리에 기본적으로 25px 크기의 둥근 모서리를 적용합니다.
- border-bottom-left-radius: 45px; — 왼쪽 하단 모서리만 45px로 더 크게 둥글게 만들어 다른 모서리와 차별화합니다.
- background, padding, width, height — 요소의 배경색과 내부 여백, 가로·세로 크기를 지정하여 둥근 모서리 효과를 눈에 잘 띄게 합니다.
값은 px뿐만 아니라 %, em 등 다양한 단위로 지정할 수 있으며, 값을 클수록 해당 모서리가 더 많이 둥글어집니다.