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.