CSS边框圆角生成器
分别调整四角0–200的px或百分比半径，实时预览并生成顺时针四值border-radius简写，支持复制和重置。
使用步骤
如何使用
- 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.