border-radius can do far more than round four corners equally. Each corner takes its own value, and with the eight-value form each corner gets separate horizontal and vertical radii, which turns a plain box into an organic, pebble-like shape.
Three modes build up from simple to fancy, and "Surprise me" generates balanced organic shapes. The preview uses your colors and size, and the CSS is ready to copy.
How to use the CSS Border Radius Generator tool
- Choose all corners, each corner or organic shape.
- Move the sliders, or press Surprise me.
- Copy the CSS.
Popular uses
- Buttons, cards and avatars
- Organic shapes behind photos and hero sections
- Understanding the eight-value syntax
Tips for the best result
- 50% on a square makes a circle; on a rectangle, an ellipse.
- Percent values scale with the element; pixel values stay fixed.
Quick facts
| Price | Free |
|---|---|
| Works with | CSS |
| Where it runs | In your browser, on your device |
| Account | Not needed |