CSS Border Radius Generator
Round each corner independently to build blobs, pills, and organic shapes — or link them for a uniform radius.
border-radius: 20px 20px 20px 20px;Tip: press Space for a random shape.
How to use this tool
- Uncheck 'Link all corners' to control each corner independently.
- Drag each corner slider to adjust the radius.
- Switch between px and % units.
- Copy the CSS and paste it into your stylesheet.
FAQ
Can I create asymmetric or blob shapes?
Yes — uncheck 'Link all corners' and set each corner to a different value to create organic, blob-like shapes.
px or % — which should I use?
Use px for a fixed radius regardless of element size, or % for a radius that scales with the element (useful for pill/circle shapes).