CSS Border Radius Generator

CSS Border Radius Generator produces correct border-radius CSS for any shape from simple rounded corners to complex 8-value elliptical radii. Simple mode applies equal radius to all four corners with a single slider. Advanced mode gives independent sliders for each corner with a link-corners toggle. The elliptical radii toggle unlocks the second set of four values in border-radius — the X and Y radius per corner independently. This enables asymmetric shapes like teardrops, leaves, and organic forms. Shape presets cover: Square, Rounded, Pill, Circle, Squircle, Leaf, Teardrop, and Chat Bubble. The output shows the most compact valid CSS shorthand and the Tailwind equivalent class.

Key Features

• Simple and Advanced Modes

  Single slider mode or independent per-corner sliders with link-corners toggle.

• Elliptical Radii Mode

  Unlocks X and Y radius per corner for the full 8-value CSS shorthand.

• Real-Time Preview

  Live rectangle preview showing the current border-radius applied instantly.

• 8 Shape Presets

  Square, Rounded, Pill, Circle, Squircle, Leaf, Teardrop, and Chat Bubble presets.

• Compact CSS Shorthand

  Generates the most compact valid shorthand using border-radius compression rules.

• Tailwind Equivalent

  Shows Tailwind rounded-* class when applicable.

1. 1

   Choose Simple or Advanced mode

   Simple mode for equal corners, Advanced mode for per-corner control.

2. 2

   Adjust sliders

   Drag the corner radius sliders and watch the preview shape update in real time.

3. 3

   Enable Elliptical (optional)

   Toggle Elliptical Radii to get independent X and Y radius per corner for organic shapes.

4. 4

   Or load a preset

   Click any shape preset thumbnail to load its configuration.

5. 5

   Copy the CSS

   Copy the complete CSS rule or just the border-radius value.

Explore these tools that work great alongside CSS Border Radius Generator: