Skip to content
Convertto

Border Radius Generator — Drag Eight Handles, Copy The CSS

Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.

A corner is four independent things: how far it reaches sideways, how far it reaches down, whether it curves away from the box or into it, and how square the curve itself is. Drag the eight handles on the preview to set the first two — that is the a / b eight-value syntax, and it is what makes a blob or an egg rather than a rounded rectangle. Cut a corner and it bites inward, which border-radius cannot express at all; raise the squircle exponent and the curve flattens toward the iOS corner. The tool says which CSS each shape needs and hands you border-radius, clip-path, an SVG clipPath, a mask or a Tailwind class to match.

Runs in your browser
Handles
Eight, one per corner per axis — the full elliptical syntax
Corners
Rounded, inverted or squircle, set per corner
Output
border-radius, clip-path, SVG clipPath, mask, Tailwind, SVG and PNG
Accuracy
Applies the CSS overlap correction, so the preview matches the browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

What is the difference between px and % for border radius?

Pixels give a fixed corner size regardless of element dimensions. Percentages resolve against different bases per axis — horizontal radii against the width, vertical against the height — so 50% turns any box into an ellipse and keeps doing so as the element resizes.

Why did my radius get smaller than the number I set?

If two radii on the same side add up to more than that side, CSS shrinks every radius on the box by one shared factor until they fit. That is why 80% + 80% behaves like 50% + 50%. The preview applies the same correction and shows the factor, so what you see is what the browser will draw.

What is an inverted corner and why can border-radius not do it?

It curves into the shape rather than away from it, like the join between a tab and the bar it sits on. border-radius only describes convex elliptical corners, so an inverted one needs clip-path or a mask. It also meets its edges at a right angle by necessity: no arc that bulges inward can be tangent to both sides of a square corner.

What does the squircle slider actually change?

The exponent of the curve. A normal corner is a quarter ellipse, which is the exponent 2 case of (x/a)ⁿ + (y/b)ⁿ = 1. Raising n keeps the same corner size but flattens the curve toward the box, which is the continuous corner Apple uses; lowering it below 2 pulls the corner to a point. Only n = 2 has a border-radius form, so anything else is exported as a path.

Which output should I use?

border-radius whenever it can draw the shape — it costs nothing, animates between values and scales with the element. clip-path: path() is pixel-absolute, so it suits a fixed-size button. The SVG clipPath is normalised to the element box, so one definition fits any size, and it has the widest support for the shapes border-radius cannot reach. A mask keeps the element paintable but needs a matching aspect-ratio or the shape crops.

Why does my border disappear on a clipped element?

clip-path clips everything the element paints, the border included. The usual workaround is to draw the outline as an SVG stroke over the same path, which is what the preview and the SVG export both do.

How to use the css border radius generator

  1. 1Pick the box size you are designing for — corners read differently on a button and a card.
  2. 2Drag the handles, or unlink the corners and set them one at a time.
  3. 3Cut a corner to curve it inward, or raise the squircle slider to square the curve off.
  4. 4Copy the format your stack wants, or export the shape as SVG or PNG.

Embed this tool

Put the working css border radius generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Clip Path GeneratorCut an element to a polygon, circle, ellipse or inset, and copy the clip-path.Blob Shape GeneratorDesign organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.CSS Shape GeneratorGenerate triangles, arrows, stars and other shapes using pure CSS.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.Glassmorphism CSS GeneratorCreate frosted-glass CSS with backdrop blur, transparency and a subtle border.

Last updated

More css generators