DESIGN TOOL
CSS Border Radius Generator
Design rounded corners visually and copy the ready-to-use CSS.
About this tool
Adjust each corner individually (or keep them linked for a uniform radius) to design rounded corners visually, with a live preview, then copy the generated border-radius straight into your stylesheet.
Frequently asked questions
- What does "link all corners" do?
- When linked, dragging any corner's slider updates all four together for a uniform radius. Unlink it to set each corner independently — useful for shapes like a "speech bubble" or asymmetric card design.
- What's the highest radius I can set?
- Up to 150px per corner here, which is enough to create a fully circular or pill-shaped element on typically-sized components — for a perfect circle, set the radius to at least half the element's width and height.
- Does border-radius work on all elements?
- Yes — it applies to any element's box, including images, buttons, and containers, in every modern browser without vendor prefixes.