HTMLCSS 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
Repeating this work? Turn this kind of browser utility into an API batch, MCP prompt, extension workflow, or shared team recipe.
Buy Pro Browse tool packsFAQ
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.