웹 디자인에서 버튼의 둥근 모서리는 전체적인 분위기를 부드럽고 세련되게 만들어 주는 중요한 요소입니다. CSS에서는 border-radius 속성 하나만으로 손쉽게 버튼에 둥근 모서리를 적용할 수 있습니다.
border-radius 속성이란?
border-radius는 요소 테두리의 모서리를 둥글게 만드는 CSS 속성입니다. 값은 픽셀(px), 퍼센트(%) 등 다양한 단위로 지정할 수 있으며, 값이 클수록 모서리가 더 많이 둥글어집니다.
- border-radius: 15px; — 네 모서리가 15px 크기로 둥글게 처리됩니다.
- border-radius: 50%; — 정사각형 요소를 완전한 원으로 만들 수 있습니다.
예제 코드
아래 코드를 실행하면 노란색 배경에 둥근 모서리가 적용된 버튼을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: yellow;
color: black;
text-align: center;
font-size: 15px;
padding: 20px;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>결과</h2>
<p>아래 버튼을 클릭해 결과를 확인해 보세요:</p>
<button class = "button">Result</button>
</body>
</html>코드 설명
위 예제에서 핵심은 .button 클래스에 적용된 border-radius: 15px; 부분입니다. 이 한 줄 덕분에 버튼의 네 모서리가 각각 15픽셀 반지름으로 둥글게 표현됩니다.
나머지 속성들은 버튼의 기본 스타일을 담당합니다.
- background-color: 버튼의 배경색을 노란색으로 지정합니다.
- color: 버튼 안 텍스트 색상을 검정으로 설정합니다.
- text-align: 텍스트를 가운데 정렬합니다.
- font-size: 글자 크기를 15px로 지정합니다.
- padding: 버튼 내부 여백을 20px로 설정해 클릭 영역을 넓힙니다.
다양한 응용 방법
border-radius는 값 조절만으로 다양한 형태를 만들 수 있습니다.
- 완전히 둥근 알약(pill) 형태:
border-radius: 9999px;처럼 큰 값을 지정하면 양 끝이 완전히 둥근 캡슐 모양 버튼이 됩니다. - 원형 버튼: 가로세로 크기가 같은 버튼에
border-radius: 50%;를 적용하면 원 모양이 됩니다. - 모서리별 개별 설정:
border-top-left-radius,border-bottom-right-radius등 개별 속성을 사용하면 특정 모서리만 둥글게 만들 수 있습니다.
이처럼 border-radius 속성을 활용하면 복잡한 이미지나 추가 마크업 없이도 순수 CSS만으로 매끄러운 둥근 모서리 버튼을 구현할 수 있습니다.