CSS Border Radius Generator

About Border Radius Generator

Three shapes from one property. A single radius rounds all four corners; four values round them separately; and the eight-value form — four horizontal radii, a slash, four vertical ones — makes each corner an ellipse rather than a quarter circle, which is how the organic blob shapes are made.

The unit changes what the shape is, not just its size. A pixel radius is fixed, so a shape scaled up keeps thin corners and looks wrong; a percentage is resolved against the box, so the shape stretches with it and a blob stays a blob at any size. That is also why percentages are the only sensible unit for the eight-value form.

A radius of half the shorter side or more is a pill: the corners meet and going further changes nothing. border-radius: 9999px is the usual idiom for that, because it cannot be outgrown by a taller element — a pill built from a fixed radius stops being a pill the moment the text wraps to two lines.

Where it helps

• All three forms — uniform, per-corner and elliptical — in one place, with the shorthand and the longhand written out.
• Shows the shape at the box size you choose, which matters because a radius that looks right at 240px looks wrong at 60px.
• Explains when a radius has become a pill and why a fixed value stops working there.
• Percentages are offered, which is what an organic shape needs and what most generators omit.
• Runs entirely in your browser.

Limits

• border-radius can only make elliptical corners. Squircles — the continuous curvature Apple's icons use — need clip-path or an SVG, and look noticeably smoother at large sizes.
• The preview is an empty box, so it cannot show what a radius does to a background image, an inner border, or a child that overflows.
• A radius larger than the box allows is scaled down by the browser proportionally, which can make hand-tuned corner values come out differently than typed.
• Overflowing children are not clipped unless overflow: hidden is set, which the preview does not model.

Frequently asked questions

What does the slash in border-radius mean?

It separates the horizontal radii from the vertical ones. border-radius: 60% 40% 30% 70% / 40% 70% 60% 30% gives every corner an ellipse with a different width and height, which is what makes the shape organic rather than four matching quarter circles.

Should I use pixels or percentages?

Pixels for interface corners, because a button and a card should have the same corner regardless of their size. Percentages for shapes — circles, ellipses, blobs — because they scale with the box and keep their proportions.

How do I make a pill-shaped button?

border-radius: 9999px. Any value at or above half the height produces the same pill, and an absurdly large one stays correct when the button grows — whereas a fixed 20px stops being a pill as soon as the label wraps.

Why does my rounded corner look cut off?

Usually a child element overflowing it: border-radius clips the background and the border, not the content. Add overflow: hidden to the rounded element, or put the radius on the child as well.

Related tools

• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Gradient Generator — Build linear, radial and conic CSS gradients
• SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it