AnyTool
Your files never leave your device. All processing happens locally in your browser.

How do you create custom rounded corners with CSS border-radius?

Set a radius on each corner in the clockwise order top-left, top-right, bottom-right, bottom-left. For elliptical corners add a slash and a second group of four vertical radii: border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%. This generator lets you drag each corner, toggle elliptical mode, pick px / % / rem / em, and copies the shortest correct CSS — all in your browser.

  • Four corners in clockwise order: top-left, top-right, bottom-right, bottom-left
  • Add a slash (8 values) for elliptical arcs: horizontal radii / vertical radii
  • Units: px / rem / em are absolute; % is relative to the box width (H) and height (V)
  • Presets (card, pill, circle, squircle, leaf, blob) + a crypto-seeded blob randomizer
  • Output collapses to the shortest equivalent form, e.g. 16px 16px 16px 16px → 16px

What is

CSS border-radius

border-radius is the CSS shorthand that rounds an element’s corners. It accepts one to four values (per corner, clockwise from top-left) or eight values split by a slash — the horizontal radii before it and the vertical radii after — where unequal pairs produce elliptical, blob-like arcs.

Design

Related terms

Rounded CornersElliptical RadiusSquircleCSS BlobPill Button

Frequently Asked Questions

Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left — the same order as margin and padding.

When you give border-radius four values they map to the corners clockwise starting at the top-left: top-left, top-right, bottom-right, then bottom-left. Fewer values are filled in by CSS rules — one value rounds all four corners equally, two values set top-left/bottom-right then top-right/bottom-left, and three set top-left, the top-right/bottom-left pair, then bottom-right. This tool always emits the shortest equivalent form.

The slash splits horizontal radii (before it) from vertical radii (after it), giving each corner an ellipse instead of a circle.

A slash turns border-radius into its eight-value form: the four values before the slash are the horizontal radius of each corner and the four after are the vertical radius. When a corner’s horizontal and vertical radii differ the arc becomes elliptical, and mixing all eight is exactly how organic “blob” shapes are made in pure CSS — for example border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%.

Pixels (or rem/em) give the same fixed curve on every corner; percentages are relative to the box, so they scale and can look different on a rectangle.

A px, rem or em radius is absolute — every corner curves identically no matter the element’s aspect ratio, which is best for consistent cards and buttons. A percentage is resolved against the box: horizontal radii against the width and vertical radii against the height, so on a non-square element the corners become elliptical and the rounding reflows when the element resizes. Use 50% on a square to make a perfect circle.

Yes — it is completely free with no signup, and the CSS is built entirely in your browser. Nothing is uploaded.

The Border Radius Generator is free with no account or limits. Your corner values, unit and elliptical toggle are just numbers that are turned into a CSS string locally in your browser; the blob randomizer uses your device’s crypto random generator. There is no server call and no CDN for processing, it works offline once cached, and copying the CSS uses your device clipboard.

Detailed Explanation

Methodology

How the border-radius Shorthand Works

CSS border-radius rounds an element’s corners and is a shorthand for up to eight radii. One to four values set the corners clockwise from the top-left (top-left, top-right, bottom-right, bottom-left), following the same fill rules as margin and padding. A slash splits the value into two groups of four — the horizontal radii before the slash and the vertical radii after — and when a corner’s horizontal and vertical radii differ the arc becomes elliptical rather than circular. The Border Radius Generator lets you set each corner, toggle the elliptical (eight-value) form, and always outputs the shortest correct string.

  • Corner order is clockwise from top-left: TL, TR, BR, BL
  • 1–4 values expand by CSS fill rules; a slash adds a second (vertical) group
  • 8-value form: horizontal radii / vertical radii → elliptical arcs
  • Output collapses repeats: 16px 16px 16px 16px → 16px
  • Deterministic and pure — the same inputs always yield the same CSS
Technical Details

Pixels, rem/em and Percentages Behave Differently

Absolute units (px, rem, em) apply the same fixed curve to a corner regardless of the element’s size or aspect ratio, which keeps buttons and cards consistent. Percentages are resolved against the box itself: a horizontal radius is a percentage of the element’s width and a vertical radius a percentage of its height. On a non-square element that makes each corner elliptical, and because the radius is tied to the box it reflows whenever the element resizes. Setting 50% on every corner of a square produces a perfect circle.

  • px / rem / em: absolute — identical curve on every corner
  • Percent horizontal = % of width; percent vertical = % of height
  • Percent radii distort on rectangles and reflow on resize
  • 50% on a square box = circle; 50% on a rectangle = ellipse
Use Cases

Organic Blobs from Eight-Value Radii

The eight-value form is the whole trick behind the fashionable “blob” shapes made in pure CSS. Giving each of the four corners its own horizontal and vertical percentage — for example border-radius: 40% 60% 60% 40% / 70% 30% 70% 30% — creates an irregular but mathematically smooth outline with no SVG required, so it scales infinitely and adds no extra file weight. The generator includes curated presets (card, pill, circle, squircle, leaf, blob) and a randomizer that seeds fresh organic percentages using the browser’s crypto random source.

  • Unique H/V percentage per corner yields an organic blob outline
  • Pure CSS — infinitely scalable, no SVG or image asset needed
  • Presets: sharp, card, pill, circle, squircle, leaf, blob
  • Blob randomizer uses crypto.getRandomValues (Math.random fallback)
Limitations

Limitations and Honest Notes

The generated CSS is exactly what the browser interprets, but a few things are worth knowing. Percentage radii are relative to the box, so a shape that looks right at one size can flatten or stretch when the element resizes or changes aspect ratio. Very large radii are capped by the browser to at most half the corresponding side, so a 300px radius on a small box simply produces the maximum round-off, and aggressive rounding can clip child content or backgrounds that overflow the corner. The model uses a single global unit, so pasted CSS with mixed units is normalised to the first unit seen.

  • Percent radii reflow with the element — verify at target sizes
  • Browsers cap a radius to half the side, so huge values just max out
  • Aggressive rounding can clip overflowing children / backgrounds
  • Pasted mixed-unit CSS is normalised to a single unit on import
Privacy & Security

Why It Is Private by Design

Everything happens on the user’s device. The corner values, unit and elliptical toggle are just numbers that are assembled into a border-radius string in the browser tab — there is no server call and no CDN for processing. The blob randomizer draws from the local crypto random generator, and copying the CSS uses the device clipboard. Nothing is uploaded, logged or stored, and the tool works offline once loaded.

  • CSS is built entirely in the browser — no upload, no CDN, no server
  • Randomizer uses local crypto.getRandomValues, never a network call
  • Output is plain CSS text copied locally to the clipboard
  • Works offline after first load; nothing is stored server-side
border-radius units and forms at a glance
Form / unitResolved againstSame on every corner?Best for
px / rem / emA fixed absolute lengthYes — identical curve regardless of box sizeConsistent cards, buttons, inputs
Percentage (%)Box width (horizontal) & height (vertical)No on rectangles — becomes ellipticalCircles, responsive rounding, blobs
4-value formEach corner, clockwise from top-leftOnly if all four are equalAsymmetric corners (leaf, tab, bubble)
8-value form (slash)Horizontal radii / vertical radiiNo — each corner is an ellipseOrganic blob shapes in pure CSS

Corner order is always clockwise from top-left (TL, TR, BR, BL). Browsers cap any radius at half the corresponding side. The generator emits the shortest equivalent form and normalises pasted mixed-unit CSS to a single unit. As of July 2026.