CSS Border Radius Generator
Edit eight circular or elliptical corner radii in px or %, drag percentage handles, compare box sizes and copy native border-radius CSS locally.
02 / Native preview
Resize. See the difference.
Target box 300 × 200px · Display scale 100%. Dimensions are for preview only, not copied into CSS.
Preview dimensions: 64–640px. Changing proportions does not create breakpoints.
Use precise fields in px mode; switch to % for eight draggable radius handles.
03 / Precision
Four corners. Eight radii.
px and % keep separate values on this page without conversion; switching may change the shape.
px: 0–9999; %: 0–100, up to one decimal. Blank, negative, exponent and unit-bearing values are rejected. These are editor limits, not CSS limits. Field arrow keys adjust 1, Shift adjusts 10.
04 / Geometry
Specified vs used radii
Overlap factor: 100%
No overlap reduction is needed.
| Corner | Specified | Used |
|---|---|---|
| Top left | 12 × 12 | 12 × 12 |
| Top right | 12 × 12 | 12 × 12 |
| Bottom right | 12 × 12 | 12 × 12 |
| Bottom left | 12 × 12 | 12 × 12 |
Calculated only for this scrollbar-free preview, displayed to two decimals. A zero on either axis makes that corner square. This is not an arbitrary DOM used-value inspector.
05 / CSS
Copy just the corners
border-radius: 12px;CSS retains specified radii without preview dimensions, background or handles. Settings stay on this page without upload, storage or URL parameters. Check content, hit areas and focus in your real component.
How to use this tool
Choose a preset and unit, select a corner, then edit its horizontal and vertical radii or drag handles in percentage mode. Compare different dimensions and the overlap factor before copying CSS. Each unit mode keeps separate values without conversion.
When not to use it
This edits native elliptical border-radius, not superellipses, corner-shape, arbitrary CSS imports or SVG paths. A preview does not certify clipping, hit areas or keyboard focus. Test the receiving component at real dimensions.
Compare box shadows → · Design polygon clipping →
Read the guide →