← All tools
// CSS / Design

Border Radius Generator online

Generate CSS border-radius with live preview — all four corners

CSS Border Radius Generator logo
by
CHUNKY
MUNSTER
// CSS

How to Use border-radius-generator

  1. Drag the sliders for each corner (top-left, top-right, bottom-right, bottom-left) or type values directly.
  2. Toggle between the shorthand (equal corners) and the per-corner (individual) mode.
  3. The live preview updates in real time — see the shape change as you adjust.
  4. Click Copy CSS to get the ready-to-paste border-radius declaration.

border-radius in CSS controls the roundness of element corners. When set to 50% on a square element it produces a circle; lower values give cards and buttons their distinctive rounded corners. This generator provides a live visual preview and outputs the cleanest possible CSS shorthand — avoiding the verbosity of writing all four corners manually.

CSS border-radius Syntax Reference

The shorthand border-radius: 8px sets all four corners equally. border-radius: 8px 16px sets top-left+bottom-right to 8px and top-right+bottom-left to 16px. The full four-value form is top-left top-right bottom-right bottom-left. For elliptical corners, use the slash syntax: border-radius: 50px / 20px sets horizontal radii to 50px and vertical to 20px — creating oval corners. This generator handles all forms.

Frequently Asked Questions

How do I make a perfect circle with CSS?

Set border-radius: 50% on an element where width equals height. The percentage is relative to the element's dimensions, so 50% makes each corner radius half the width/height — forming a circle.

What is an elliptical border-radius?

The slash syntax (border-radius: 100px / 50px) sets different radii on the x and y axes — creating an oval/elliptical corner shape instead of a circular arc.

What units can I use for border-radius?

Any CSS length unit: px, em, rem, %, vw/vh. Percentages are relative to the element's width (for horizontal radius) and height (for vertical radius).

Can border-radius affect click/hover areas?

No. border-radius clips the visual rendering but the element's clickable area remains a rectangle. To clip the interactive area, use CSS clip-path or adjust the element shape at the DOM level.

See also the Box Shadow Generator and CSS Gradient Generator for complete CSS design tooling.