Border Radius Generator

Fine-tune border-radius for all four corners. Create rounded rectangles, circles, or organic blob shapes.

Mode

Link All Corners

Corner Radii

Top-Left 20px

Top-Right 20px

Bottom-Right 20px

Bottom-Left 20px

Appearance

Fill Color

Size 200px

Presets

Generated CSS

How to Use the Border Radius Generator

Use Simple mode to set a uniform radius for each corner in pixels. Switch to Advanced (H/V) mode to control horizontal and vertical radii independently using the CSS shorthand border-radius: TL TR BR BL / TL TR BR BL syntax. This unlocks organic, asymmetric shapes.

Understanding border-radius

The border-radius CSS property rounds the corners of an element. When you provide a single value, all four corners are equal. With four values, they follow the order: top-left, top-right, bottom-right, bottom-left. The advanced slash syntax lets you set separate horizontal and vertical radii for each corner.

Common Shapes

Circle: Set border-radius to 50% on a square element.
Pill: Set border-radius to a large fixed value (e.g., 9999px) on a rectangle.
Blob: Use the H/V syntax with asymmetric percentages for organic shapes.