About

Standard border-radius tools limit users to simple rounded corners, failing to unlock the full potential of the CSS3 specification. The border-radius property supports complex elliptical curves defined by eight unique values (four horizontal, four vertical). This generator bridges the gap between design intent and code implementation, offering precision control over these values.

This tool addresses a specific pain point in responsive design: maintaining shape integrity across different aspect ratios. By manipulating the semi-major and semi-minor axes of the corner ellipses, developers can create organic "blobs," complex dividers, and non-standard UI cards without relying on heavy SVG assets. The underlying engine calculates the exact percentages required to render smooth curves in all modern browsers.

Formulas

The rendering of a rounded corner in CSS is governed by the mathematics of an ellipse. For a specific corner, the curve is a quadrant of an ellipse defined by a horizontal radius r_x and a vertical radius r_y.

{

Standard: r_x = r_ySlash Syntax: r_x ≠ r_y

If the sum of two adjacent radii exceeds the length of the side L, the browser applies a reduction factor f to prevent overlap:

f = min(Lr₁ + r₂, 1)

This ensures that r_new = r_old × f, maintaining the shape's proportions while fitting it within the box model.

Reference Data

Syntax Type	Formula / Value	Visual Result	Performance Cost
Uniform	r	Symmetric Circular Corners	Negligible
Elliptical	x / y	Asymmetric Curves	Low
Full Control	t-l t-r b-r b-l / ...	Organic / Blob Shapes	Low (Browser Native)
Pill (Capsule)	9999px	Semi-circles at ends	Optimized by engine
Circle	50%	Perfect Circle (if square)	Hardware Accelerated
Leaf	0 r 0 r	Diagonal Symmetry	Low
Chat Bubble	r r r 0	Directional Indicator	Low
Arch	r r 0 0	Top-heavy Curve	Low

Frequently Asked Questions

CSS shapes using border-radius are significantly lighter in file size (bytes vs kilobytes), render faster because they don't require DOM parsing of SVG nodes, and are easier to animate with standard CSS transitions. They are ideal for buttons, cards, and decorative backgrounds.

To create a perfect circle that stays circular, set "width" and "height" to the same value (or use 'aspect-ratio: 1/1') and set "border-radius: 50%". If the box is rectangular, "50%" will create an oval.

Yes. The border-radius property is fully animatable. You can transition between a square and a circle, or morph between two different "blob" shapes, by using the "transition" property. The browser interpolates the values between the 8 points smoothly.

The slash separates horizontal radii (before the slash) from vertical radii (after the slash). This specific syntax allows for the creation of non-symmetrical, elliptical corners, which is the secret to creating organic "blob" shapes.

Yes. The complex multi-value border-radius syntax is part of the CSS3 specification and is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. Legacy IE support is not available for the slash syntax.