CSS Border Radius Generator
Round corners visually — per-corner and elliptical — and copy the CSS.
About CSS Border Radius Generator
CSS Border Radius Generator shapes the corners of an element visually and returns the corresponding border-radius CSS. Drag the four corner sliders for round corners, or split each corner into separate horizontal and vertical radii to produce elliptical curves — the kind of subtly asymmetric shape used in modern UI design and squircle-style icons.
Worked example: set all four corners to 12 px and the output is the familiar 'border-radius: 12px;'. Set top-left and bottom-right to 24 px and the other two to 0 to get a parallelogram-cornered card. Drag any corner's vertical radius separately and the output becomes the longer form 'border-radius: 24px 12px / 12px 24px;' — values before the slash are horizontal radii, values after are vertical, which is exactly how CSS specifies elliptical corners.
A few notes. The slider values are pixels, but you can use percentages directly in your own CSS if you want the radius to scale with the element — 50% on all corners produces a circle for a square box, an ellipse for a rectangle. Very large radii on small elements clip to the element's own size: a 100 px radius on a 40 px box just gives you a pill or a circle. The order of the four values in the shorthand is clockwise from the top-left (top-left, top-right, bottom-right, bottom-left), which the generator handles for you so the output always matches the preview.
All design runs locally in your browser.