CSS border-radius를 시각적으로 조절하고 코드를 복사하세요
border-radius: 8px;각 모서리의 반경을 슬라이더로 조절하세요
'모든 모서리 연결'을 토글하여 동시에 조절하거나 개별적으로 조절하세요
타원형 모드를 활성화하여 가로/세로 값을 따로 조절하세요
CSS 코드를 복사하여 프로젝트에 적용하세요
border-radius는 요소의 테두리 모서리를 둥글게 만드는 CSS 속성입니다. 0은 직각, 값이 클수록 더 둥근 모서리가 됩니다.
각 모서리는 가로와 세로 반경을 따로 가질 수 있습니다. 슬래시(/)로 구분하여 지정하면 타원형 모서리를 만들 수 있습니다.
px는 절대값으로 고정된 크기이며, %는 요소의 너비와 높이에 상대적입니다. %를 사용하면 요소 크기에 따라 반응형으로 동작합니다.
border-radius는 요소의 네 모서리를 독립적으로 둥글게 조절할 수 있는 CSS 속성입니다. 값이 0이면 직각 모서리, 50%이면 정원이 됩니다. 버튼에는 8px~16px의 적당한 곡률이 친근한 인상을 주고, 카드 컴포넌트에는 12px~20px이 일반적으로 사용됩니다. 알약(pill) 모양 버튼은 9999px처럼 매우 큰 값을 사용하면 너비에 관계없이 항상 반원 끝을 유지합니다.
border-radius: 8px는 네 모서리 모두 동일한 값을 적용하는 단축 표기입니다. 값을 두 개 쓰면 (top-left+bottom-right, top-right+bottom-left), 네 개를 쓰면 각 모서리를 시계 방향으로 개별 지정합니다. 또한 슬래시(/)를 사용해 가로 반경과 세로 반경을 따로 지정하면 타원형(elliptical) 모서리를 만들 수 있어 물방울, 잎사귀, 말풍선 같은 유기적인 모양을 구현할 수 있습니다.
네 모서리에 서로 다른 값을 조합하면 독특한 커스텀 도형을 만들 수 있습니다. 예를 들어 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%는 물결 모양의 blob 형태를 만듭니다. CSS clip-path보다 브라우저 호환성이 높고 overflow: hidden과 함께 사용하면 이미지를 원하는 모양으로 마스킹하는 데도 효과적입니다. 일관된 디자인 시스템을 위해 프로젝트 전반에 걸쳐 같은 곡률 값을 재사용하는 것을 권장합니다.