CSS Border Radius Generator

Generate CSS border-radius free online with independent corner control. Live preview with adjustable corners, ready-to-copy CSS for rounded or organic shapes.

Top Left: 12px

Top Right: 12px

Bottom Left: 12px

Bottom Right: 12px

Browser only.

How to Use This Tool

Adjust each corner independentlyFour separate sliders for full control

Watch the live previewSee the shape update instantly

Copy the generated CSSSingle-property border-radius output

Four Independent Corners, One CSS Property

Border-radius accepts independent values for all four corners in a single declaration, but remembering the correct order and syntax for asymmetric corners is easy to get wrong without a visual reference. This generator gives direct, independent control over each corner with instant visual feedback.

From Simple Rounding to Organic Shapes

Equal radius values on all corners produce the familiar uniform rounded-rectangle look. Dramatically different values per corner, especially combined with percentage-based units, can produce irregular, organic blob shapes -- a technique increasingly used for distinctive background decoration and visual accents beyond simple UI rounding.

Percentages Versus Pixels -- A Meaningful Choice

Pixel-based radius values stay fixed regardless of element size. Percentage-based values scale with the element's own dimensions, which is specifically what allows a true circle (50% on all corners of a square) or a properly proportioned ellipse, rather than a fixed curve that might look disproportionate at different sizes.

Frequently Asked Questions

Yes, CSS border-radius supports independent values for each of the four corners, and this generator gives you direct control over each one separately, not just a single uniform radius applied to all corners at once.

Setting dramatically different radius values for each corner, especially using percentage-based values rather than pixels, can produce irregular, organic-feeling shapes -- useful for decorative background elements or distinctive visual accents.

Pixel values produce a fixed, absolute curve regardless of element size, while percentage values scale relative to the element's own dimensions -- percentage values are what produce a true ellipse or organic blob shape on rectangular elements, since the curve scales with the box.

Yes, setting all four corners to 50% on a perfectly square element produces a true circle, since each corner's curve extends exactly to the element's center from both directions.

No, border-radius has been universally supported across all modern browsers for many years without vendor prefixes, making it safe to use without any fallback concerns.