Guide: build CSS border-radius with live preview
Modern `border-radius` supports up to four radii per corner and elliptical values (`50% / 25%`). Tweaking in DevTools line by line is slow when you need pills, asymmetric cards, or top-only rounding.
Sliders and numeric fields update the in-browser preview instantly — nothing hits a server. You see the effect on a sample box and copy a ready-made `border-radius` declaration.
Use when implementing design systems, rounded buttons, or card mockups. Pair with the box-shadow builder to validate visual hierarchy before committing CSS.
Step by step
- Pick units and corners — Set px, rem, or % per corner. Unlock independent values for top-left, top-right, etc. on asymmetric layouts.
- Tune horizontal and vertical radii — For ellipses, use slash notation (e.g. `20px / 40px`). The preview shows circular vs. squashed corners.
- Match the design — Compare to Figma: equal radii on grid cards; larger radii on modals or highlight chips.
- Copy the CSS rule — Paste into CSS modules, Tailwind arbitrary values, or your theme `--radius-*` variables.