When is elliptical actually useful?

Mostly for organic 'blob' shapes used in illustrations, where each corner is asymmetric. Standard UI almost always uses uniform or 4-value radii.

% is relative to the element's width/height — so a 50% radius on a square gives a circle, on a rectangle an oval. px is absolute regardless of element size.

Why doesn't the pill preset look right on a square?

Pill = 999px radius assumes the element is wider than tall. On a square element, that just becomes a circle.

All four-value `border-radius` and elliptical syntax work in every browser since 2010. Universally safe.

Border Radius Generator

Visual border-radius editor: uniform mode for quick rounding, per-corner mode for chat bubbles and tabs, elliptical mode for blob shapes (horizontal radius differs from vertical). Presets cover the common shapes you'd build by hand. Units in `px`, `%`, or `rem`. Output is the shortest valid CSS — single value when all corners match, four values when they don't, full `h / v` syntax when elliptical.

—

Presets

Uniform (one value for all corners)Elliptical (horizontal / vertical)UnitColor

All corners16px

Preview

CSS

border-radius: 16px;

How to use

Pick a preset to start, or toggle 'Uniform' off to edit per-corner.
Toggle 'Elliptical' for blob shapes (each corner gets two radii).
Copy `border-radius: …` and paste into your CSS.

Frequently asked questions

When is elliptical actually useful?: Mostly for organic 'blob' shapes used in illustrations, where each corner is asymmetric. Standard UI almost always uses uniform or 4-value radii.
px vs % radius?: % is relative to the element's width/height — so a 50% radius on a square gives a circle, on a rectangle an oval. px is absolute regardless of element size.
Why doesn't the pill preset look right on a square?: Pill = 999px radius assumes the element is wider than tall. On a square element, that just becomes a circle.
Browser support?: All four-value `border-radius` and elliptical syntax work in every browser since 2010. Universally safe.

Related tools

Image Round Corners

Apply rounded corners, a full circle mask, or per-corner radii to an image — preview with a checkerboard for transparency, download as PNG or JPEG.

Image 0 0

CSS Triangle Generator

Generate pure-CSS triangles (8 directions) using border or clip-path — copy the rule, drop it in.

Color 0 0

CSS clip-path Builder (Circle, Ellipse, Polygon, Inset)

Visual builder for the CSS `clip-path` property — pick a shape (circle, ellipse, inset, or polygon), tweak the numbers with sliders or click the preview to add polygon points, and copy a ready-to-paste CSS declaration. 10 shape presets included (triangle, hexagon, star, arrow, message bubble, plus, …).

Color 0 0

CSS Gradient Generator

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Color 0 0

CSS Box Shadow Generator

Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.

Color 0 0

CSS Filter Playground

Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.

Color 0 0