CSS Border-Radius Generator

Visually adjust rounded corners with live preview and CSS code to copy.

Vertical radii:

px
px 
{{ cssOutput }}

What is border-radius?

The CSS property border-radius rounds the corners of an element. You can set a uniform radius for all four corners or style each corner individually. The shorthand follows the order: top-left, top-right, bottom-right, bottom-left.

Elliptical Border Radii

With the extended syntax border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 you can define a horizontal and vertical radius for each corner. This creates elliptical curves that produce more organic shapes.

Common Use Cases

  • Circles: border-radius: 50% on a square element.
  • Pill shape: border-radius: 9999px for rounded buttons.
  • Cards: border-radius: 8px to 16px for modern card designs.
  • Blob shapes: Different horizontal and vertical radii for organic shapes.