CSS Border Radius Generator
Build CSS border-radius values with individual control over each corner. Toggle between px and % units. Live preview shows exactly how the shape looks. Copy the single-value shorthand or the full 4-corner syntax.
Ctrl+Enter to run · Ctrl+K to switch tools · Recent button shows input history
Let AI do the hard part. Fix broken HTML, convert to email-safe HTML, or clean up any markup in one click — 3 free AI runs per day, no account needed.
Try the AI HTML FixerFAQ
What is the 4-value border-radius syntax?
border-radius: top-left top-right bottom-right bottom-left. You can also use the 8-value / syntax for elliptical corners: each corner gets a horizontal and a vertical radius.
What is the % unit for border-radius?
Percentages are calculated relative to the element's width (for horizontal) and height (for vertical). Setting all corners to 50% on a square element gives a circle.