CSS border-radius 속성이란?
CSS의 border-radius 속성을 사용하면 요소의 네 모서리(왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래)의 둥근 정도를 한 번에 설정할 수 있습니다. 각 모서리마다 개별 속성(border-top-left-radius, border-top-right-radius 등)을 따로 지정하는 대신, 이 하나의 속성만으로 사각형 요소를 부드러운 둥근 모양으로 만들 수 있습니다.
아래 예제 코드를 직접 실행해 보면서 border-radius 속성이 실제로 어떻게 적용되는지 확인해 보세요.
예제 코드
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
background: #85C1E9;
color: white;
padding: 20px;
width: 200px;
height: 250px;
}
</style>
</head>
<body>
<p id = "rcorner">Rounded corners!</p>
</body>
</html>코드 설명
위 예제에서 #rcorner 선택자에 border-radius: 25px;가 적용되어 있습니다. 이렇게 하면 파란색 배경의 200×250px 크기 요소의 네 모서리가 모두 25px 반경으로 둥글게 처리됩니다.
값 지정 방식
border-radius 속성은 값의 개수에 따라 다음과 같이 동작합니다.
- 값 1개 — 네 모서리 전체에 동일하게 적용됩니다. (예:
25px) - 값 2개 — 첫 번째 값은 왼쪽 위/오른쪽 아래, 두 번째 값은 오른쪽 위/왼쪽 아래에 적용됩니다.
- 값 3개 — 첫 번째는 왼쪽 위, 두 번째는 오른쪽 위/왼쪽 아래, 세 번째는 오른쪽 아래에 적용됩니다.
- 값 4개 — 시계 방향(왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래) 순서로 각각 적용됩니다.
또한 픽셀(px)뿐 아니라 퍼센트(%)나 em 단위도 사용할 수 있으며, 값을 50%로 설정하면 정사각형 요소를 원(circle) 형태로 만들 수도 있습니다.