Border radius generator

Before the slash come the horizontal radii of the four corners (top left, top right, bottom right, bottom left); after it come the vertical ones. border-radius: 50% / 10% means half the width horizontally and 10% of the height vertically, which is how you build ellipses and other irregular corners.

px gives a fixed radius that stays put as the element grows. Percentages resolve against the element box — horizontal radii against the width, vertical ones against the height — so the same value looks different on different aspect ratios. For a perfect circle use 50% on a square element.

That is the CSS shorthand collapse rule: four identical corners collapse to one value, top-left equal to bottom-right and top-right equal to bottom-left collapse to two, only top-right equal to bottom-left collapses to three, otherwise four values are written. The tool applies the same rule so the output is equivalent but shorter.

It clips the background and border, but not child elements — you need overflow: hidden for that. Children that overflow a rounded corner get cut by the square corner, which is the most common "my radius stopped working" cause.

The spec allows up to 100%, and browsers scale the radii down proportionally when the sum of two adjacent radii exceeds the side length, so the rendered result stops matching your numbers. Use px when you need exact control.