⬜ CSS Border Radius Generator
Round each corner independently and copy the border-radius CSS. The preview updates live, including elliptical corners and organic blob shapes.
border-radius: 24px 24px 24px 24px;How the css border radius generator works
border-radius rounds the corners of a box, and it accepts a value per corner, and even two radii per corner (horizontal and vertical) to make elliptical curves. This generator gives you a slider for each corner plus a mode for elliptical radii, then writes the shorthand. Equal values on all corners make a uniform rounded box; a very large value (or 50%) makes a pill or circle; mismatched horizontal and vertical radii make the soft, asymmetric "blob" shapes popular in modern UI. The output is valid CSS generated locally in your browser.
Using percentages makes the radius scale with the element's size, which is how you turn any square into a perfect circle with border-radius: 50%. Using pixels keeps the corner the same regardless of size. Mix the two for responsive pills that keep a fixed corner.
Frequently asked questions
How do I make a circle with border-radius?
Apply border-radius: 50% to a square element (equal width and height). The 50% radius on every corner merges into a full circle. For a pill shape on a rectangle, use a large pixel value or 9999px.
What are elliptical corners?
A corner can have two radii: one horizontal, one vertical, written as horizontal / vertical. When they differ, the corner curves as part of an ellipse rather than a circle, which creates softer, asymmetric shapes. This tool lets you set both.
How do I make a blob shape?
Give each corner a different horizontal and vertical radius (the 8-value border-radius form). The mismatched curves produce the organic, lava-lamp blob look. The generator can output this long-form shorthand for you.
Does border-radius clip the content inside?
The border and background are clipped to the rounded shape, but overflowing child content is not clipped unless you also set overflow: hidden on the element. Add that if an image or child needs rounded corners too.
Is anything uploaded?
No. The CSS is built in your browser and nothing is sent to a server.