/

Border Radius Generator

Processed Client Side

Round each corner independently, or switch to elliptical radii for organic blob shapes. Preview live and copy the border-radius CSS.

Corner options
Unit
Top-left24px
Top-right24px
Bottom-right24px
Bottom-left24px
Preview & CSS
uniform
border-radius: 24px 24px 24px 24px;

Bookmark this tool now — skip the search next time you need it.

About Border Radius Generator

This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.

Round each corner of a box independently and copy the resulting border-radius CSS. Beyond the usual uniform rounding, it supports elliptical radii — two values per corner, a horizontal and a vertical one — which is what CSS uses to produce the soft, asymmetric organic shapes often called blobs. You can work in pixels or percentages, and the difference matters: pixel radii stay fixed as the element resizes, while percentage radii scale with it, so a 50% radius always produces a perfect circle or ellipse no matter the dimensions. The preview updates live.

Key features

  • Independent control of all four corners
  • Elliptical mode with two radii per corner, for organic blob shapes
  • Switch units between pixels and percentages
  • Live preview that reflects every change immediately
  • Generates the full border-radius shorthand, including the slash syntax for elliptical radii
  • Percentage mode scales with the element, so 50% always yields a circle or ellipse
  • Toggle between uniform and elliptical without losing either set of values, so you can compare the two shapes back to back
  • Preview sized like a real element rather than a swatch, which is what makes an over-large radius obvious before it reaches your stylesheet
  • Copy-ready CSS output
  • Runs entirely in your browser

How to use it

  1. Choose px or % as your unit.
  2. Drag each corner to the radius you want.
  3. Turn on Elliptical if you want two radii per corner for an organic shape.
  4. Check the live preview, then copy the CSS.

Tips & common mistakes

  • border-radius: 50% turns a square into a circle and a rectangle into an ellipse. It is the reliable way to make round avatars regardless of image dimensions.
  • Pixels stay fixed as an element grows; percentages scale with it. Use pixels for cards and buttons, percentages for anything that must stay proportionally round.
  • The slash in the output separates horizontal from vertical radii. Everything before the slash is horizontal, everything after is vertical — that is what elliptical mode generates.
  • Nested rounded boxes look wrong when they share a radius. An inner element should use roughly the outer radius minus the padding, or the curves will not sit concentrically.
  • A very large radius is silently clamped by the browser when the corners would overlap, so pushing past half the element size has no further effect.
  • For pill-shaped buttons use a radius larger than half the height — 999px is the common idiom — and it stays a perfect pill at any height.
  • Percentages resolve against each axis separately: the horizontal radius uses the width and the vertical one uses the height. That is why 50% on a wide box gives an ellipse rather than a circle.
  • border-radius clips the background and the border but not overflowing children. An image inside a rounded card needs overflow: hidden on the card, or its own matching radius, or the corners stay square.

Related tools

Browse all 19 Frontend / CSS tools

Frequently asked questions

9

Each corner has its own slider, so you can round any combination independently. The generated border-radius shorthand lists the values in top-left, top-right, bottom-right, bottom-left order.

Elliptical mode gives each corner two radii — horizontal and vertical — producing the "a b c d / e f g h" syntax. It is how organic blob shapes are created.

Pixels give a fixed corner size; percentages scale with the element, which keeps pill shapes and circles proportional as the box resizes. This tool supports both.

Set all four corners to 50% on a square element. The generator’s "Full round" button in % units does this for you.

It separates horizontal from vertical radii. Everything before the slash is the horizontal radius of each corner and everything after is the vertical — that is what elliptical mode produces.

Use a radius larger than half the height — 999px is the common idiom. It stays a perfect pill at any height without needing recalculation.

An inner element should not share the outer radius. Use roughly the outer radius minus the padding, or the two curves will not sit concentrically.

Effectively yes — the browser silently clamps radii when adjacent corners would overlap, so pushing past half the element size has no further visible effect.

Pixels stay fixed as the element resizes, which suits cards and buttons. Percentages scale with it, so 50% always gives a circle or ellipse regardless of dimensions.