Visually design CSS border-radius values. Control each corner individually with sliders. Copy the shorthand property or the longhand per-corner CSS in one click.
Shorthand: border-radius: top-left top-right bottom-right bottom-left; (clockwise, starting top-left). If only one value is given, it applies to all four corners.
Two values: first = top-left & bottom-right, second = top-right & bottom-left.
Longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
For elliptical corners, each longhand accepts two values separated by a space: border-top-left-radius: 50px 25px; sets horizontal and vertical radii separately.
50% (or 9999px) on a square element creates a perfect circle. On a rectangle, 50% creates a pill/capsule shape.
See also: Box Shadow Generator · CSS Gradient Editor · CSS Unit Converter