CSS 🔷 Shapes

CSS Border Radius Generator

Border-radius lets you round the corners of elements. This generator gives you independent control over each corner, supports multiple units, and can create elliptical corners.

Live Preview
12
12
12
12
Generated CSS
Adjust parameters above to generate CSS...

How to Use

  1. Adjust each corner's radius independently using the sliders.
  2. Choose your preferred unit: pixels (px), rems, ems, or percentages.
  3. Toggle 'Use Elliptical' to create elliptical corner curves using the slash syntax.
  4. Copy the generated CSS and paste it into your stylesheet.

How It Works

Border-radius can take up to 4 values: top-left, top-right, bottom-right, bottom-left (clockwise). The slash syntax (border-radius: A/B) specifies elliptical corners where A is the horizontal radius and B is the vertical radius.
Back to CSS Generators