CSS3로 둥근 모서리 만드는 방법 완벽 가이드

CSS3에서 border-radius 속성을 사용하면 요소의 모서리를 둥글게 처리할 수 있습니다. 이 속성은 각 모서리의 곡률 반지름을 픽셀(px) 또는 백분율(%) 단위로 지정하며, 값이 클수록 더 많이 둥글어집니다.

기본 문법

selector {
    border-radius: 값;
}

네 개의 모서리를 한 번에 적용하거나, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius처럼 개별적으로 지정할 수도 있습니다.

예제 코드

아래 예제는 둥근 모서리를 적용한 박스와 기본 모서리를 가진 박스를 나란히 비교하여 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    display: inline-block;
    width: 200px;
    height: 200px;
    text-align: center;
    font-size: 30px;
}
.rounded {
    border-radius: 24px;
    border: 4px solid green;
}
.normal {
    border: 4px solid green;
    margin-left: 20px;
}
</style>
</head>
<body>
<h1>CSS3 둥근 모서리 예제</h1>
<div class="rounded">Rounded Corners</div>
<div class="normal">Default corners</div>
</body>
</html>

코드 설명

.rounded 클래스: border-radius: 24px;를 적용하여 네 모서리가 24px 크기로 부드럽게 곡선 처리됩니다.
.normal 클래스: border-radius를 적용하지 않아 기본적인 직각 모서리가 유지됩니다.
두 div 요소는 display: inline-block;으로 설정되어 가로로 나란히 배치되며, 시각적 차이를 쉽게 비교할 수 있습니다.

실행 결과

위 코드를 실행하면 왼쪽에는 초록색 테두리에 둥근 모서리가 적용된 박스가, 오른쪽에는 일반 직각 모서리의 박스가 표시됩니다.

추가 팁: 원형 만들기

정사각형 요소에 border-radius: 50%;를 적용하면 완전한 원을 만들 수 있습니다. 아바타 이미지나 버튼 디자인에 자주 활용되는 기법입니다.

.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: green;
}

마무리

border-radius는 CSS3에서 가장 널리 사용되는 속성 중 하나로, 이미지 없이도 부드러운 UI를 구현할 수 있게 해줍니다. 카드 레이아웃, 버튼, 입력 필드 등 다양한 요소에 활용해 보세요.