Border Radius Generator

이 도구 소개

border-radius 속성은 요소의 모서리를 둥글게 만듭니다. 네 값이 모두 같으면 단일 값 단축 표기가 사용됩니다. 다른 값을 사용하면 비대칭 모양이 만들어집니다 — 알약형은 모든 모서리에 50%를 사용하고, 잎사귀형은 0%와 50%를 교대로 사용합니다.

코너 숫자를 클릭하여 직접 값을 입력하거나, 링크된 슬라이더를 드래그하여 네 모서리를 한번에 변경하세요. 모든 코너 고정을 해제하면 각 모서리를 독립적으로 제어할 수 있습니다.

사용 방법

1. 네 코너 입력란(좌상단, 우상단, 좌하단, 우하단)에 값을 입력합니다.
2. 모든 코너 고정을 활성화하면 슬라이더로 네 값을 동시에 설정할 수 있습니다.
3. 디자인에 맞게 px 또는 % 단위로 전환합니다.
4. 프리셋(알약형, 잎사귀형, 블롭형 등)을 클릭하여 미리 정의된 모양을 즉시 적용합니다.

활용 사례

UI 디자이너는 버튼, 카드, 아바타 모양을 만들 때 border-radius를 사용합니다. 개발자는 브랜드 디자인 시스템에 맞게 둥근 모서리를 미세 조정합니다. 알약형(50%)은 태그와 배지에 자주 사용됩니다. 비대칭 값으로 장식 요소를 위한 유기적인 잎사귀나 블롭 모양을 만듭니다.

자주 묻는 질문

• px와 % 차이는 무엇인가요? — px는 요소 크기에 관계없이 고정된 모서리 반경을 줍니다. %는 요소의 너비와 높이에 비례합니다 — 정사각형 요소에서 모든 모서리에 50%를 사용하면 완벽한 원이 됩니다.
• 각 모서리마다 다른 반경을 설정할 수 있나요? — 네. 모든 코너 고정을 해제하고 각 코너 입력란에 다른 값을 입력하세요.
• 단축 출력값은 무엇을 의미하나요? — 네 모서리가 모두 같으면 단일 값으로 출력됩니다. 다를 경우 CSS 순서는 좌상단, 우상단, 우하단, 좌하단입니다.