테두리 반경 생성기

border-radius 단축 속성은 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 최대 4개의 값을 받습니다(예: border-radius: 12px 8px 20px 4px;). 이 도구에서 '모든 모서리 연결'을 끄고 각 슬라이더나 숫자 입력란을 개별적으로 조정한 다음, 4개 값 전체를 사용하는 생성된 CSS를 복사하세요.

너비와 높이가 같은 요소에 border-radius를 50%로 설정하세요. 사전 설정 패널에는 네 모서리를 모두 50%로 지정하고 미리보기를 정사각형으로 만들어 명확히 보여주는 '원형' 옵션이 포함되어 있습니다. 생성되는 CSS는 단순히 border-radius: 50%;이며, 이를 100×100 픽셀 요소에 적용하면 완벽한 원이 만들어집니다.

픽셀 값은 요소 크기와 관계없이 고정된 모서리 곡선을 생성하므로 상자의 크기가 변경되어도 둥근 정도가 일정하게 유지됩니다. 퍼센트 값은 요소 자체의 너비와 높이에 대한 상대값이므로 동일한 퍼센트라 해도 작은 버튼과 큰 카드에서는 다르게 보입니다. 슬라이더 위에 있는 px 및 퍼센트 선택 항목으로 단위를 전환하세요.

모든 모서리 연결이 켜져 있으면 슬라이더 하나를 드래그할 때 네 모서리가 모두 동일한 값으로 업데이트되며, 이는 카드 모서리 등을 균일하게 둥글게 만드는 데 유용합니다. 각 모서리를 독립적으로 제어하려면 이 기능을 끄세요. 프리셋을 적용하면 이후 항상 연결 기능이 꺼지므로 결과를 미세 조정할 수 있습니다.

같은 변에 인접한 두 모서리 반지름의 합이 해당 변의 길이보다 클 경우, 브라우저는 곡선이 변의 중앙에서 정확히 만나도록 둘 다 비례하여 축소합니다. 가로로 넓고 세로가 짧은 요소에서 일반 픽셀 값으로도 완전히 둥근 알약 모양이 만들어지는 이유가 바로 이것이며, 이 도구의 알약 프리셋에서 이를 확인할 수 있습니다.