How do I make a circle with border-radius?

Use 50% on a box whose width equals its height. The Circle preset uses 50% on a 200 × 200 px box. On a 260 × 120 px box the same 50% gives an ellipse, because the horizontal radius is 130 px and the vertical radius 60 px.

How do I make a pill-shaped button?

Use a radius of half the height in px. The Pill preset uses 60 px on every corner of a 260 × 120 px box, so the ends are semicircles. A larger radius gives the same pill: 100 px on that box is scaled by 0.6 and drawn at 60 px.

How do I make a squircle or a beveled corner in CSS?

Keep the border-radius and add corner-shape: border-radius: 30px; corner-shape: squircle; gives squircle corners, and bevel cuts each corner straight. The keywords stand for superellipse() values (MDN): squircle is superellipse(2), round 1, bevel 0, scoop −1, square infinity and notch −infinity. The property only changes a corner whose radius is above 0. MDN marks it experimental and not Baseline, so a browser without it draws ordinary round corners. The CSS tab writes a corner-shape line and the Tailwind tab an arbitrary [corner-shape:...] class.

What does the slash in border-radius mean?

With elliptical corners the CSS lists the four horizontal radii, a slash, then the four vertical radii, for example 10px 20px 30px 40px / 5px 10px 15px 20px. Without a slash, each corner is a circular arc.

Why do my corners look smaller than the numbers I set?

Two radii on one side add up to more than that side, so the browser multiplies every radius by f = min(side ÷ sum of its two radii). With 100 px corners on a 160 px square, f is 0.8. The page shows a note when this happens.

Why does the Tailwind tab write rounded-[50%] and not rounded-full?

Tailwind's rounded-full is its pill utility, written as calc(infinity * 1px) in the CSS. On a box that is not square it does not match the ellipse that 50% draws, so the tab writes rounded-[50%] for linked corners at 50%. Other linked values are written as rounded-[10px], and 0 is rounded-none.

CSS Border Radius Generator

Create CSS border-radius values for rounded corners, circles, pills, and organic shapes with per-corner controls and copyable code. How it works

All Corners10px

Width160px

Height160px

Fill color#6366f1

Border color

Border0px

Corner shape

About the CSS Border Radius Generator

On a 160 × 160 px box, border-radius: 80px or 50% draws a circle. This generator sets the radius for each corner in px or %, with optional elliptical corners, and writes it as CSS, Tailwind, React Native, SCSS or clip-path code. An optional corner-shape (bevel, notch, scoop, squircle, square or superellipse) changes the curve itself in browsers that support it. When two radii on one side add up to more than that side, browsers shrink every radius by the same factor, and the page shows a note when that happens.

Corner overlap on a 160 × 160 px box

Radius on every corner	Scale factor f	Radius drawn
60 px	1	60 px
80 px	1	80 px
100 px	0.8	80 px
120 px	0.667	80 px
150 px	0.533	80 px

Each side needs two radii, so on a 160 px side anything above 80 px is shrunk by f = 160 ÷ (2 × radius), the rule in CSS Backgrounds Level 3, section 4.5. The CSS the page writes still shows the radius you set; the browser does the shrinking.

How to use this tool

Choose a preset (Circle, Pill, Soft Corners, Rounded Rectangle, Speech Bubble or Egg) or start from 10 px on every corner.
Keep Linked on to move all corners together, or switch to Individual to set each corner. Choose px or %, and turn on Elliptical to set a horizontal and a vertical radius per corner.
Set the preview width and height from 60 to 300 px so the shape matches your element.
Optionally pick a Corner shape other than round; for superellipse, set the exponent from −4 to 4.
Pick the CSS, Tailwind, React Native, SCSS or clip-path tab and copy the code.

Frequently asked questions

How do I make a circle with border-radius?: Use 50% on a box whose width equals its height. The Circle preset uses 50% on a 200 × 200 px box. On a 260 × 120 px box the same 50% gives an ellipse, because the horizontal radius is 130 px and the vertical radius 60 px.
How do I make a pill-shaped button?: Use a radius of half the height in px. The Pill preset uses 60 px on every corner of a 260 × 120 px box, so the ends are semicircles. A larger radius gives the same pill: 100 px on that box is scaled by 0.6 and drawn at 60 px.
How do I make a squircle or a beveled corner in CSS?: Keep the border-radius and add corner-shape: border-radius: 30px; corner-shape: squircle; gives squircle corners, and bevel cuts each corner straight. The keywords stand for superellipse() values (MDN): squircle is superellipse(2), round 1, bevel 0, scoop −1, square infinity and notch −infinity. The property only changes a corner whose radius is above 0. MDN marks it experimental and not Baseline, so a browser without it draws ordinary round corners. The CSS tab writes a corner-shape line and the Tailwind tab an arbitrary [corner-shape:...] class.
What does the slash in border-radius mean?: With elliptical corners the CSS lists the four horizontal radii, a slash, then the four vertical radii, for example 10px 20px 30px 40px / 5px 10px 15px 20px. Without a slash, each corner is a circular arc.
Why do my corners look smaller than the numbers I set?: Two radii on one side add up to more than that side, so the browser multiplies every radius by f = min(side ÷ sum of its two radii). With 100 px corners on a 160 px square, f is 0.8. The page shows a note when this happens.
Why does the Tailwind tab write rounded-[50%] and not rounded-full?: Tailwind's rounded-full is its pill utility, written as calc(infinity * 1px) in the CSS. On a box that is not square it does not match the ellipse that 50% draws, so the tab writes rounded-[50%] for linked corners at 50%. Other linked values are written as rounded-[10px], and 0 is rounded-none.

Important limitations

Radii run from 0 to 150, in px or %, and the preview box from 60 to 300 px. In %, 150 is only the field limit: two corners on one side that add up to more than 100% are scaled back, so 150% on every corner draws the same as 50%. A value above 50% changes the shape only when the other corner on that side is smaller, as in 80% and 20%. The size of your real element decides what a percentage means. Only the CSS and Tailwind tabs carry corner-shape, and the preview shows it only in a browser that supports it. React Native has no elliptical radius, so with elliptical corners the React Native tab uses each corner's vertical value and converts % against the smaller side of the preview box.

Sources

Last reviewed: 2026-10-22

Corners, presets and output formats

For a button, card, avatar or badge, set one radius for all four corners, or unlink them and set each corner on its own, in px or %. Turn on elliptical corners to give each corner a separate horizontal and vertical radius. The presets cover Circle, Pill, Soft Corners, Rounded Rectangle, Speech Bubble and Egg. Drag the handles on the preview or type into the number fields, then copy the result as CSS, Tailwind, React Native, SCSS or a clip-path. The preview box can be set from 60 to 300 px wide and high, so you can judge the radius on the shape you will use.

Corner shape adds the new corner-shape property: bevel, notch, scoop, squircle, square or superellipse() with an exponent from −4 to 4, written into the CSS and Tailwind code. MDN marks it experimental and not yet in every browser; a browser without it draws round corners.

How border-radius is read

border-radius: 10px; rounds all four corners by 10 px. With the elliptical option the horizontal radii come first, then a slash, then the vertical ones: 10px 20px 30px 40px / 5px 10px 15px 20px.

A percentage is taken of the box: the horizontal radius against its width and the vertical radius against its height. So 50% is a circle on a square box and an ellipse on a wide one. For a pill, use half the height in px: 60 px on a 260 × 120 box.

If two radii on one side add up to more than that side, the browser multiplies every radius by f = min(side length ÷ sum of the two radii). With 100 px on every corner of a 160 px square, f = 160 ÷ 200 = 0.8, so each corner is drawn at 80 px. The CSS this page writes does not change, and a note under the preview tells you when the shrink happens. Radii run from 0 to 150; a value outside that range gets a message and changes nothing.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.

CSS

CSS Flexbox Generator

Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind.