CSS Border Radius Generator

border-radius with 4 values sets: top-left, top-right, bottom-right, bottom-left (clockwise from top-left). With 3 values: top-left, top-right & bottom-left, bottom-right. With 2 values: top-left & bottom-right, top-right & bottom-left. With 1 value: all corners.

Set border-radius: 50% on an element with equal width and height. The percentage is relative to the element's dimensions. border-radius: 50% on a 100px×100px div creates a perfect circle.

Yes — the / syntax sets independent horizontal and vertical radii: border-radius: 50px / 25px creates an elliptical corner. The full form is: border-radius: horizontal-tl horizontal-tr horizontal-br horizontal-bl / vertical-tl vertical-tr vertical-br vertical-bl.

px values are absolute and don't scale with font size. em values are relative to the element's font-size — useful for components that should scale proportionally. rem is relative to the root font size. % is relative to the border-box dimensions.