CSS Border Radius Generator

Configure each corner and preview a CSS border-radius value.

Corner settings

Preview only. Percentage radii depend on the element dimensions.

Radius result

Preview box

About the CSS Border Radius Generator

Build the four-value border-radius shorthand while seeing how different corners affect a sample box.

How to use it

  1. Enter values for the four corners in clockwise order.
  2. Choose px, rem or percentage units.
  3. Review the preview and copy the CSS declaration.

Shorthand order

Four values apply to top-left, top-right, bottom-right and bottom-left corners respectively.

Example

16px 16px 4px 4px creates larger rounding across the top and smaller rounding across the bottom.

Notes

Large values are constrained by the element geometry, and percentage results change when width or height changes.