BYTETOOLS

CSS Border Radius Generator

Design rounded corners visually with per-corner sliders and a live preview box. Copy modern border-radius CSS, including fancy 8-value organic blob shapes.

Corner radii

25
25
25
25

CSS

border-radius: 25% 25% 25% 25%;

What is the CSS Border Radius Generator?

The CSS Border Radius Generator lets you shape an element's corners visually. Drag a slider for each corner — or link them to move all four together — and watch the preview box update live.

  • Per-corner radius sliders with live preview
  • Link toggle to edit all corners together
  • 8-value slash syntax for organic blob shapes
  • Clean, copy-ready CSS output
  • Percentage-based radii scale with the element
  • Free and fully client-side

How to use the CSS Border Radius Generator

  1. 1

    Drag the slider for each corner, or enable Link corners to adjust all four at once.

  2. 2

    Watch the preview box update live.

  3. 3

    Optionally enable 8-value syntax and shape the vertical radii for blob effects.

  4. 4

    Click Copy CSS to grab the border-radius declaration.

About the CSS Border Radius Generator

The CSS Border Radius Generator lets you shape an element's corners visually. Drag a slider for each corner — or link them to move all four together — and watch the preview box update live. The generated border-radius declaration is ready to copy.

The output is the modern, unprefixed border-radius property that every current browser supports. If you have seen the legacy -moz-border-radius prefix in old code or search results, you no longer need it — this generator writes plain border-radius that works everywhere.

Want organic, blob-like shapes? Enable the 8-value syntax to control the horizontal and vertical radius of each corner independently (the border-radius slash syntax). It is the trick behind the fluid blob shapes popular in modern hero sections.

The tool runs entirely in your browser: no uploads, no sign-up, instant results.

Frequently asked questions

What is the 8-value border-radius syntax?

border-radius accepts horizontal and vertical radii separated by a slash: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. The four values before the slash set each corner's horizontal radius and the four after set the vertical radii, which is how designers create asymmetric blob shapes.

What order do the four border-radius values go in?

Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. So border-radius: 10px 20px 30px 40px rounds the top-left by 10px, top-right by 20px, bottom-right by 30px and bottom-left by 40px.

How do I make a perfect circle with border-radius?

Give a square element border-radius: 50%. Each corner's radius becomes half the width and height, which turns the square into a circle. On a non-square element, 50% produces an ellipse instead.

Should I use pixels or percentages for border-radius?

Pixels give a consistent corner size regardless of element size — ideal for cards and buttons. Percentages scale with the element, which is what you want for circles, avatars and blob shapes. This generator uses percentages so shapes stay proportional.

Why does a large border-radius stop changing the shape?

Browsers cap each radius so adjacent corners never overlap. Once the combined radii exceed the element's side length, the values are scaled down proportionally, so increases beyond that point have no visible effect.

Do I still need -moz-border-radius?

No. -moz-border-radius and -webkit-border-radius were vendor-prefixed versions needed years ago for early Firefox and Safari. Every modern browser supports the standard border-radius property unprefixed, which is exactly what this generator outputs — no prefixes to copy or download.

Guides for CSS Border Radius Generator

Related tools