About the CSS Border Radius Generator
Corner rounding reads as one number in most designs, but border-radius accepts up to four, running clockwise from the top left. Setting them separately is how you build a speech bubble, a tab that is square where it meets its bar, or a card whose leading edge is softer than its trailing edge. The four fields here map straight onto those positions, so what you dial in is what the browser paints.
The rule that comes out is written the way a stylesheet author would write it. Four identical corners become a single value, a top-left/bottom-right pair becomes two values, and only genuinely different corners produce the full four-value form. Percentages are capped at 50, because anything above that behaves as 50 in every engine, and switching to em or rem ties the curve to the font size so it scales with a component instead of staying fixed.
A subtle point worth knowing: when the sum of two radii along one edge is larger than that edge, browsers scale every radius down proportionally rather than overlapping the curves. Widening the preview box will show that adjustment happening. Once the shape is right, pair the rule with a shadow from the Box Shadow Generator or drop it into a component built with the CSS Button Generator.
How to use
- Type a radius into each of the four corner fields, or tick Same value on all corners and use the top left field alone.
- Pick the unit. Percentages are relative to the box size, so they stay round as the element grows.
- Rename the class if you like, then copy the rule from the output pane.
Common questions
- Why does my output show two values instead of four?
- Because the top left matches the bottom right and the top right matches the bottom left. CSS reads that pair form as the same shape, so the shorthand is shorter with no change in rendering.
- How do I make a perfect circle?
- Give the element equal width and height and set every corner to 50%. A pill shape needs a large pixel value such as 999px on all four corners instead.
- Do I still need -webkit-border-radius?
- No. The unprefixed property has been supported since Internet Explorer 9 and Android 2.2, so the prefixed version is dead weight.
- Can I set elliptical corners?
- This generator produces circular corners. For elliptical ones, take the output and add a slash plus a second set of radii, as in border-radius: 40px / 20px.