⬜ CSS Border Radius Generator

Control all 8 sub-radius values visually. Build blobs, pills, squircles and asymmetric shapes.

Quick Presets
Mode
Link all corners
Advanced (8 sub-values)
Use % values
Corner Radii
All Corners 20px
Shape Style
Width 200px
Height 200px
Fill
Live Preview
Border Radius
Generated CSS
All CSS Values

About CSS border-radius

The Full Syntax

border-radius shorthand accepts 1–4 values before the optional / and 1–4 values after it. Values before the slash define horizontal radii; values after define vertical radii. This allows elliptical corners — perfect for blobs and organic shapes.

Percentage vs Pixel

Percentage values are relative to the element's dimensions: horizontal percentages reference width, vertical percentages reference height. border-radius: 50% creates a perfect circle on a square, while a rectangle becomes an ellipse. Pixel values stay fixed regardless of size.

Common Patterns

  • Pill: border-radius: 999px
  • Circle: border-radius: 50%
  • Squircle: ~30% all corners
  • Blob: asymmetric 8-value syntax
  • Card: 8px16px