More than rounded corners
border-radius is one of the most used CSS properties, and most of the time it is a single value like 8px. But it can do much more: a different radius on each corner, percentages that adapt to the element's size, and elliptical corners with a different horizontal and vertical radius. Combined, they create pills, circles, leaves, speech bubbles and the organic blob shapes popular in modern design, all without images or SVG.
This generator gives you a control for each corner. Keep them linked to change all four at once or unlink them to set each one individually. Work in px for fixed radii or in % for shapes that scale with the element. Turn on elliptical corners to set the horizontal and vertical radius separately; the output then uses the full eight-value syntax with a slash.
Presets give you a pill, a circle and a blob shape to start from. The live preview shows the result, and the CSS is written in its shortest valid form, so border-radius: 12px 12px 12px 12px becomes border-radius: 12px.
Because the shape is pure CSS, it stays sharp at any size, animates smoothly with transitions, and adapts to the content: a blob made with percentages keeps its proportions whether the element is 100 or 600 pixels wide. That makes it a lightweight alternative to SVG masks or images for decorative shapes, avatars and image frames. The generator runs in your browser and is free to use without limits: no sign-up and no Pro needed.
How to create a border radius
- Start from a preset (pill, circle, blob) or from scratch.
- Choose px or % as the unit.
- Adjust all corners together, or unlink them and set each corner.
- Turn on elliptical corners to set horizontal and vertical radii separately.
- Click Copy CSS to get the shortest border-radius declaration.
Where to use it
- Cards, buttons and inputs with consistent rounded corners.
- Pill-shaped buttons and tags.
- Circular avatars and icons.
- Organic blob shapes behind images or illustrations.
- Speech bubbles and tabs with only some corners rounded.
Reading the border-radius syntax
- One value: all corners. border-radius: 8px.
- Two values: top-left and bottom-right, then top-right and bottom-left.
- Four values: top-left, top-right, bottom-right, bottom-left (clockwise).
- With a slash: horizontal radii before it, vertical radii after it. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% creates a blob.
- 50% on a square gives a circle; a large px value like 9999px on a rectangle gives a pill.
px or %?
Percentages are relative to the element's width (horizontal radius) and height (vertical radius), so on a rectangle 50% produces an ellipse, not a pill. For pills use a large px value; for circles, blobs and shapes that should scale with the element, use %.
Frequently Asked Questions
Is the border-radius generator free?
Yes. The CSS generators are free to use without limits, with live preview and Copy CSS.
How do I make a circle?
Use the circle preset or set border-radius: 50% on an element with equal width and height.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii. That is what creates elliptical corners.
How do I make a blob shape?
Start from the blob preset or turn on elliptical corners and use different percentages for each corner.
Does border-radius clip the content?
It rounds the background, border and shadow. To clip images or children too, add overflow: hidden.