CSS 둥근 모서리 생성기

border-radius는 상자의 모서리를 둥글게 만듭니다. 카드에 쓰는 은은한 4 px부터 알약, 원, 유기적인 블롭 모양까지 모두 가능합니다. 이 생성기에서는 모서리마다 값을 정하거나, 가로·세로 반지름을 함께 쓰는 타원 문법 전체(30% 70% 70% 30% / 30% 30% 70% 70%)를 입력할 수 있습니다. 입력값을 검사해 가장 짧은 동일 CSS, 네 개의 개별 속성, Tailwind 클래스를 돌려주며, 미리보기는 같은 값을 브라우저가 직접 그린 것입니다.

사용 방법

1. 프리셋을 고르거나, 직접 입력을 유지하고 네 모서리의 반지름을 입력합니다.
2. 단위를 고릅니다. 고정 모서리는 px, 상자에 따라 변하는 모양은 %입니다.
3. 블롭이나 달걀 모양은 "/"가 들어간 고급 값으로 세로 반지름을 다르게 입력합니다.
4. 미리보기 크기를 실제 요소에 맞춘 뒤 CSS를 복사합니다.

계산식

border-radius: <왼쪽 위> <오른쪽 위> <오른쪽 아래> <왼쪽 아래> [ / <세로 반지름> ]

margin처럼 빠진 값은 반복됩니다. 값 하나는 모든 모서리, 둘은 대각선 쌍(왼쪽 위·오른쪽 아래, 오른쪽 위·왼쪽 아래), 셋은 두 번째 값을 오른쪽 위와 왼쪽 아래에 모두 씁니다. 각 모서리는 사분 타원이며, "/" 앞이 가로 반지름, 뒤가 세로 반지름입니다.

예시

모서리 10, 20, 10, 20 px은 border-radius: 10px 20px;로 줄어듭니다. 달걀 프리셋은 가로 50%, 세로는 위쪽 60%와 아래쪽 40%이며 border-radius: 50% / 60% 60% 40% 40%;가 됩니다. 가로 반지름 네 개는 같아서 하나로 합쳐지지만 세로 반지름은 그럴 수 없기 때문입니다.