What CSS border-radius is
border-radius is the CSS property that rounds the corners of any box. One value rounds all four corners equally, four values give each corner its own radius, and the full eight-value form makes elliptical corners so you can build organic “blob” shapes. This generator lets you drag sliders, preview the result live, and copy a ready-to-paste CSS line.
How to use the generator
- In Simple mode, pick the unit (
pxor%) and drag the sliders. With “Link all 4 corners” on, one slider controls every corner; turn it off to fine-tune each corner on its own. - In Blob mode, adjust the four horizontal radii and the four vertical radii to warp the box.
- Hit Random blob to spin up a pleasant organic shape in one click.
- Copy the
border-radius: ...;output with the Copy button.
The four individual corners
The four-value shorthand runs clockwise from the top-left corner: border-radius: top-left top-right bottom-right bottom-left. When opposite values match, the CSS engine collapses them into shorter forms.
| Values | Meaning | Example |
|---|---|---|
| 1 value | All 4 corners equal | border-radius: 12px |
| 2 values | Diagonal 1 / diagonal 2 | border-radius: 12px 4px |
| 4 values | Each corner on its own | border-radius: 12px 24px 8px 16px |
Worked example
Say you have a 300 by 200 px card and want only the top-left corner heavily rounded. Set top-left to 40 px and the rest to 6 px, and the output is border-radius: 40px 6px 6px 6px;. For a “leaf” shape (two opposite corners round, two square) use border-radius: 0 40px 0 40px;. With the unit set to percent, border-radius: 50% on a square 200 by 200 px box gives a perfect circle, because the radius equals half of each side.
The 8-value syntax (organic shapes)
The full form splits horizontal and vertical radii with a slash: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4. The first four are each corner’s horizontal radius; the four after the / are the vertical radii. Because every corner becomes a quarter-ellipse, the box stops being a rounded rectangle and turns into a blob. A classic starting point is border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; tweaking those eight numbers yields droplets, pebbles, and blobs for backgrounds, avatars, or hero sections.
Frequently asked questions
How do I make a circle?
Use a square box (equal width and height) and set border-radius: 50%. On a rectangular box you get an ellipse instead. In the generator, switch the unit to % and push the slider to 50.
Can I give one corner a different value?
Yes. Turn off “Link all 4 corners” and move each slider on its own, or edit the four shorthand values directly. There are also single properties such as border-top-left-radius for one corner only.
How do I create an organic blob shape?
Switch to Blob mode and play with the eight values, or press “Random blob”. The trick is using different horizontal and vertical percentages: when a corner’s h and v radii differ, that corner curves asymmetrically and the blob effect appears.
Does border-radius clip the content inside?
Not on its own. It rounds the border and background, but a child image can still poke out past the corners. Add overflow: hidden to the container to clip anything that falls outside the rounded curves.