CSS Border Radius Generator
Set each corner's border radius individually with a live preview, and get clean shorthand CSS.
Adjust each corner independently (or all together) and see the shape update live.
Combine this with the CSS Box Shadow Generator for a soft, rounded card-style component.
What Does border-radius Control?
The border-radius property rounds an element's corners - it can be set as one value for all four corners, or four separate values for each corner independently (top-left, top-right, bottom-right, bottom-left).
Why Use This Tool?
Visualizing how much rounding a given pixel value actually produces on your element's real size is hard without a live preview, especially for asymmetric corner combinations (like a speech-bubble shape).
How to Use It
- Adjust each corner's radius, or link them to move together.
- Watch the preview shape update live.
- Copy the generated CSS - a clean shorthand is used automatically when all corners match.
Limitations
This covers the standard elliptical border-radius model - the more advanced two-value-per-corner syntax (for independently-elliptical corners) isn't generated here.