CSS Border Radius 생성기
「CSS Border Radius 생성기」는 코드, 데이터 및 QR 작업을 위한 브라우저 도구입니다. 입력과 결과는 일반적으로 이 기기에서 처리되며 가입이 필요하지 않습니다.
사용 방법
사용 방법
- Choose pixels or percentages and set each corner from 0 to 200.
- Watch the preview update as you change the values.
- Generate, copy, or reset the CSS shorthand.
Clockwise four-corner shorthand
The output uses the CSS four-value order: top left, top right, bottom right, and bottom left. Each corner is independently adjustable from 0 to 200 in the selected unit.
Pixels and percentages
Pixel radii are fixed lengths. Percentage radii are resolved against the corresponding box dimensions and can create visibly different curves on non-square boxes. This generator emits one circular radius per corner and does not generate the slash syntax for separate horizontal and vertical ellipse radii.
자주 묻는 질문
더 알아보기
What does a percentage radius measure?
A percentage radius is resolved from the box dimensions by CSS, so the same value can look different on a wide rectangle and a square.
Can I create elliptical corners?
The preview and output use circular corner radii only. CSS supports elliptical radii with slash syntax, but this focused generator does not emit that form.
Why is the maximum 200?
The 0–200 range keeps the controls practical for common cards, panels, and badges while still allowing oversized curves. CSS may clamp radii when adjacent corners cannot fit.