Border Radius Generator
Round every corner independently, switch to elliptical radii for organic shapes, and copy the shorthand CSS behind the live preview.
About the Border Radius Generator
Corner radius is one of the quietest carriers of brand personality in an interface. Sharp corners read as technical and serious; a 4 to 8 pixel radius reads as neutral and modern; 16 pixels and above reads as friendly and consumer-facing; a fully rounded pill reads as playful. Every design system fixes a radius scale early precisely because inconsistency here makes an interface feel assembled from parts.
The property is deeper than most people use it. border-radius accepts up to eight values — a horizontal and a vertical radius for each of the four corners — separated by a slash. When the two radii of a corner differ, the curve becomes elliptical rather than circular. Combining eight different values produces the soft, asymmetric blob shapes that have become a staple of modern landing pages, and they are pure CSS with no image or SVG required.
This generator exposes all of it visually. Link the corners for a uniform radius, unlink them to shape each corner individually, or switch on elliptical mode for the full eight-value control with independent horizontal and vertical handles. The preview updates live and the output is the shortest correct shorthand rather than four separate longhand declarations.
How to use it
- Start with a uniform radiusOne slider rounds all four corners equally — the right answer for most cards and buttons.
- Unlink for per-corner controlSet top-left, top-right, bottom-right and bottom-left independently for tabs, speech bubbles and asymmetric cards.
- Switch on elliptical radiiGive each corner separate horizontal and vertical values to create true elliptical curves.
- Try the blob presetsOrganic asymmetric shapes ready to use as decorative backgrounds and image masks.
- Resize the previewRadius behaves differently at different element sizes; drag the preview to test at realistic dimensions.
- Copy the CSSThe shortest valid shorthand for the shape you built, ready to paste.
Features
- Linked and unlinked modesOne value for everything, or four independent corners when the design needs asymmetry.
- Elliptical radiiFull eight-value control with the slash syntax for horizontal and vertical radii.
- Percentage supportUse percentages for shapes that scale with the element rather than staying fixed.
- Blob presetsCurated organic shapes for decorative sections and image masks.
- Resizable previewTest how the radius reads on a wide banner and a small button without changing the values.
- Shortest valid outputCompact shorthand rather than four longhand declarations.
Who uses this tool
- UI designersFix a consistent radius scale across buttons, inputs, cards and modals in one sitting.
- Front-end developersReproduce an unusual corner treatment from a design file without measuring it by eye.
- Landing page buildersGenerate organic blob shapes for section backgrounds and image masks with no image assets.
- Theme customisersRound the corners of an existing theme's components through a custom CSS panel.
Tips worth knowing
- Nested rounded elements look wrong when their radii match. An inner element should use roughly the outer radius minus the padding between them.
- border-radius: 50% turns a square into a circle. For a pill, use a large pixel value such as 999px so it stays pill-shaped at any width.
- Very large radii on small elements clip content. If text starts colliding with a curve, reduce the radius or increase the padding.
Frequently asked questions
How does the eight-value border-radius syntax work?
Values before the slash are the horizontal radii of the four corners, clockwise from top-left; values after the slash are the vertical radii in the same order. When a corner's two radii differ, its curve is elliptical rather than circular.
What is the difference between percentage and pixel radii?
Pixels are absolute and stay the same whatever the element's size. Percentages are relative to the element's width and height, so a percentage radius scales with the element — which is why 50% always produces a circle from a square.
How do I make a perfect circle?
Give a square element border-radius: 50%. If the element is not square the result is an ellipse, so set equal width and height, or use aspect-ratio: 1.
What radius should I use for buttons and cards?
There is no universal answer, but 6–10 pixels is the common modern default for buttons and inputs, with cards often slightly larger at 12–16. What matters more than the number is using the same small set of values consistently throughout the interface.
Why does my rounded corner look clipped?
Usually a child element is overflowing the rounded parent. Add overflow: hidden to the parent so the child is clipped to the curve — this is essential for images inside rounded cards.
Are blob shapes made with border-radius performant?
Yes. They are pure CSS geometry with no image to download and no extra DOM, so they cost essentially nothing and scale to any size without loss.