CSS로 빈 원 만드는 방법 – border-radius와 border 활용하기

CSS만으로도 빈 원, 즉 속이 비어 있고 테두리만 있는 링(ring) 형태의 원을 아주 간단하게 만들 수 있습니다. 핵심은 정사각형 요소에 border-radius: 50%를 적용해 완전한 원으로 만든 뒤, 배경을 투명하게 처리하고 border 속성으로 테두리선만 그려주는 것입니다.

빈 원 만들기의 핵심 원리

정사각형 크기 지정 – width와 height를 동일한 값으로 설정합니다.
원형으로 변형 – border-radius: 50%를 적용하면 사각형이 완전한 원이 됩니다.
속을 비우기 – background-color: transparent로 내부를 투명하게 만듭니다.
테두리 그리기 – border 속성으로 선의 두께와 색상을 지정합니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px;
    }
    .circle {
        height: 40px;
        width: 40px;
        background-color: transparent;
        border: 5px solid rgb(52, 15, 138);
        border-radius: 50%;
        display: inline-block;
    }
    div :nth-of-type(2n) {
        border-color: red;
    }
</style>
</head>
<body>
<h1>빈 원(Hollow Circle) 예제</h1>
<div>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 보라색과 빨간색 테두리를 가진 빈 원 4개가 한 줄로 나란히 표시됩니다. :nth-of-type(2n) 선택자 덕분에 짝수 번째 원에는 빨간색 테두리가 적용되어 색상 대비를 쉽게 확인할 수 있습니다.

응용: 채워진 원과의 차이

반대로 border 없이 background-color에 색상을 지정하면 속이 꽉 찬 원(도트)이 됩니다. 이처럼 배경 채우기와 테두리 그리기를 조합하면 도넛 모양, 반투명 링, 굵은 테두리 원 등 다양한 원형 UI 요소를 자유롭게 구현할 수 있습니다.