CSS Border Radius Generator – Rounded Corners and Blob Shapes
Round the corners of any element visually. Control every corner in pixels or percent, use presets for pills and circles, or switch to advanced 8-value mode to create organic blob shapes.
Drag the sliders for top left, top right, bottom right and bottom left, or tick “Same value for all corners”. Switch the unit to % for shapes that scale with the element. Presets create rounded cards, pills, circles and leaves; “Random blob” switches to the 8-value syntax for organic shapes. Copy the shortest possible border-radius CSS.
How to use Border Radius Generator
- Pick a preset or move the corner sliders.
- Choose px or % as the unit.
- Link the corners if they should be equal.
- Use Advanced mode or Random blob for organic shapes.
- Copy the border-radius CSS.
How border-radius works
`border-radius` rounds the corners of an element. With one value all four corners are equal; with four values they go clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Two values set top-left/bottom-right and top-right/bottom-left. The generator always outputs the shortest form.
| CSS | Result |
|---|---|
| border-radius: 12px | Softly rounded card |
| border-radius: 999px | Pill shape on any width |
| border-radius: 50% | Circle (on a square) or ellipse |
| border-radius: 0 60px | Leaf shape |
| border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% | Organic blob |
px or percent?
Pixel values stay the same regardless of the element’s size, which suits cards and buttons. Percentages are relative to the element’s width (horizontal radius) and height (vertical radius), so 50 % turns a square into a circle and a rectangle into an ellipse. For a pill on an element of unknown width, use a very large pixel value such as 999px instead of 50 %.
Elliptical corners and blobs
Each corner can have a different horizontal and vertical radius, written before and after a slash. That 8-value syntax produces the soft, irregular “blob” shapes used in modern illustrations and hero sections. In Advanced mode you control all eight values; “Random blob” creates a new shape each time while keeping the curves smooth. Animate between two blob shapes with a CSS transition for a living, morphing effect.
Tips
- Nested elements look best when the inner radius equals the outer radius minus the padding.
- Images inside a rounded container need `overflow: hidden` on the container, or their own border-radius.
- Large radii on small buttons can make text look cramped; leave enough padding.
Related CSS tools
Add depth with the CSS Box Shadow Generator, fill shapes with the CSS Gradient Generator, create frosted cards in the Glassmorphism Generator and convert sizes with PX to REM Converter.
You may also find these free tools useful: JSON Formatter, Password Generator and Regex Tester.
Frequently asked questions
How do I round corners in CSS?
Use border-radius, for example border-radius: 12px for all corners or border-radius: 10px 20px 30px 40px for each corner.
How do I make a circle with CSS?
Give a square element border-radius: 50%.
How do I make a pill-shaped button?
Use a large value such as border-radius: 999px; it stays a pill at any width.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii, which creates elliptical corners.
Can I round only one corner?
Yes. Set the other corners to 0, or use border-top-left-radius and similar properties.
Last updated: