Border Radius 생성기

주로 일러스트의 유기적 '블랍' 모양 — 코너마다 비대칭. 표준 UI는 거의 균일 또는 4값.

%는 요소의 가로/세로에 상대적 — 정사각에 50%면 원, 직사각에 50%면 타원. px는 요소 크기와 무관히 절대값.

Pill = 999px는 요소가 세로보다 가로 길다고 가정. 정사각이면 그냥 원이 됩니다.

4값 border-radius와 타원 문법은 2010년 이후 모든 브라우저 지원. 어디서나 안전.

브라우저가 한도를 두기 때문입니다. 한 변에 놓인 두 반지름이 겹칠 만큼 커지면, 서로 교차하는 대신 정확히 맞닿도록 모든 반지름을 같은 비율로 줄입니다. 40px 상자에 999px를 줘도 깨진 모양이 아니라 깔끔한 알약이 되는 이유이자, 숫자를 두 배로 올려도 아무것도 달라지지 않는 이유입니다.

네 값 형식은 왼쪽 위에서 시계 방향입니다. 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순입니다. 값이 셋이면 두 번째 값이 그 사이에 있는 두 모서리를 함께 맡고, 값이 둘이면 대각선끼리 짝을 이룹니다. margin과 padding을 읽는 순서와 같습니다.