CSS3의 둥근 모서리(Rounded Corners) 기능을 활용하면 border-radius 속성 하나만으로 본문이나 텍스트 요소에 부드럽고 세련된 색상 코너를 손쉽게 추가할 수 있습니다. 예전에는 이미지를 이용해 둥근 테두리를 구현해야 했지만, CSS3부터는 간단한 코드 한 줄로 처리할 수 있어 웹 디자인 작업이 훨씬 편리해졌습니다.
border-radius 기본 사용법
border-radius 속성에 픽셀(px) 또는 백분율(%) 값을 지정하면 요소의 네 모서리가 해당 값만큼 둥글게 처리됩니다. 아래 예제는 초록색 배경의 사각형 박스에 25px 크기의 둥근 모서리를 적용한 코드입니다.
예제 코드
<html>
<head>
<style>
#rcorner {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorner">Rounded corners!</p>
</body>
</html>실행 결과
위 코드를 실행하면 연한 초록색(#8AC007) 배경의 200×150px 크기 박스가 생성되며, 네 개의 모서리가 25px 반지름으로 부드럽게 둥글게 표현됩니다. padding: 20px; 덕분에 텍스트가 모서리에 붙지 않고 여유 있게 배치되는 점도 눈여겨보세요.
모서리별로 다르게 설정하기
네 모서리를 한 번에 적용하지 않고 개별적으로 조절하고 싶다면 다음 하위 속성들을 사용할 수 있습니다.
- border-top-left-radius – 왼쪽 위 모서리
- border-top-right-radius – 오른쪽 위 모서리
- border-bottom-left-radius – 왼쪽 아래 모서리
- border-bottom-right-radius – 오른쪽 아래 모서리
예를 들어 border-radius: 25px 10px 25px 10px;처럼 값을 여러 개 지정하면 왼쪽 위부터 시계 방향으로 각각 다른 곡률을 적용할 수 있습니다. 값을 50%로 설정하면 원 형태의 요소도 쉽게 만들 수 있습니다.
브라우저 호환성
border-radius 속성은 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 지원되므로 별도의 접두사(-webkit-, -moz- 등) 없이도 안정적으로 사용할 수 있습니다. 버튼, 카드, 이미지 프레임 등 다양한 UI 요소에 활용해 보세요.