Border Radius Generator
Build CSS border-radius shapes, including blobs.
The CSS border-radius property rounds corners, and with separate horizontal and vertical radii it can create pills, leaves and organic blob shapes.
About Border Radius Generator
Shape rounded corners, pills, leaves and organic blobs with per-corner horizontal and vertical radii in pixels or percent. Link all corners for uniform rounding, preview live and copy the shortest border-radius CSS.
The CSS border-radius property rounds corners, and with separate horizontal and vertical radii it can create pills, leaves and organic blob shapes. This generator gives you a slider for every corner and outputs the shortest valid CSS.
How to use Border Radius Generator
- Choose pixels or percent as the unit.
- Drag the horizontal and vertical sliders for each corner — tick Link all corners to keep them equal.
- Watch the preview shape update.
- Copy the border-radius value.
Key features
- Independent horizontal and vertical radius for each corner.
- Pixel or percentage units.
- Compact shorthand output, using the slash syntax for elliptical corners.
Common use cases
- Pill buttons and rounded avatars.
- Organic blob shapes for hero illustrations.
- Unique card and image masks.
Frequently asked questions
Related tools
Color Picker
Click any pixel in an image to get its exact color code.
CSS Gradient Generator
Create linear, radial and conic CSS gradients visually.
Color Converter
Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH.
Color Contrast Checker
Check WCAG contrast ratio between text and background colours.