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.

Controls

12
12
12
12
Live Preview
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.

Related Tools & Services

GoDaddy.com

Website builder, domains and hosting.

Visit GoDaddy.com →

Hostinger

Web hosting to deploy your designs.

Visit Hostinger →
Back to CSS Generators