CSS Border-Radius Generator

Formula used

The shorthand order follows top left then top right.

Bottom right follows next and bottom left finishes.

One value applies the same radius everywhere.

Two values alternate across opposite corners.

Three values separate top left from opposite corners.

Four values control every corner independently.

A slash separates horizontal and vertical radii.

How to use this calculator

Choose a radius unit before adjusting corner values.

Use linked corners for fast symmetrical designs.

Unlock corners when each corner needs different shaping.

Horizontal and vertical values create elliptical curves.

Drag preview handles for direct visual adjustments.

Select a preset when starting from common shapes.

Change preview dimensions to test circles and pills.

Adjust colors and borders to match your interface.

Choose shorthand expanded or minified CSS output.

Copy the declaration or complete reusable class.

Download the stylesheet for immediate project use.

Share settings by copying the generated configuration URL.

Border-radius guide

Border radius softens rectangular corners with curved edges.

Pixels provide precise and predictable corner measurements.

Percentages scale relative to the element dimensions.

Fifty percent often creates circles from square elements.

The same percentage creates ellipses on rectangles.

Large pixel values can create flexible pill shapes.

Rem units scale with the document root size.

Em units scale with the element font size.

Elliptical radii use horizontal and vertical components.

They create organic cards badges and decorative shapes.

Browsers normalize oversized radii during final rendering.

This generator also limits unsafe numeric extremes.

Negative values are automatically replaced with zero.

Invalid text never becomes part of generated CSS.

The preview reflects valid normalized values immediately.

Linked editing keeps all four corners synchronized.

Independent editing supports asymmetric interface treatments.

Presets provide fast starting points for common designs.

Random shapes can inspire decorative component styling.

The checkerboard helps evaluate transparent-looking design contexts.

Dark preview mode tests contrast on dark surfaces.

Zoom changes preview scale without changing generated dimensions.

Undo restores previous radius and style configurations.

Redo reapplies states removed during recent editing.

Local saving keeps work available between browser visits.

Shared URLs encode settings without storing server data.

The class name is sanitized before code generation.

Expanded output shows every corner property separately.

Shorthand output keeps styles compact and readable.

Minified output removes unnecessary spacing and line breaks.

Optional dimensions make copied examples immediately visible.

Optional borders help reproduce the current preview closely.

Background output can be excluded for existing components.

Keyboard focus styles support accessible control navigation.

Responsive controls adapt across desktop tablet and mobile.

Use small radii for subtle interface softness.

Use larger radii for cards chips and badges.

Organic presets work well for decorative visual elements.

Always test extreme curves with real component content.

Readable CSS remains easier to maintain across projects.

Consistent corner systems strengthen overall interface visual rhythm.