CSS Border Radius Generator

The border-radius property rounds the corners of an element's box. When you give it four values, the browser maps them clockwise to the top-left, top-right, bottom-right, and bottom-left corners — the exact TL, TR, BR, BL order this tool exposes through its four sliders. Each value defines the radius of a quarter-circle that the corner follows: a larger radius cuts a bigger curve, and a value of zero leaves a square corner. The declaration this generator outputs, such as 'border-radius: 20px 20px 20px 20px;', uses pixel units, so the curve stays the same physical size regardless of the element's dimensions. The full CSS specification allows much more than this: percentage values that scale with the box, separate horizontal and vertical radii written with a slash to make elliptical corners, and the individual longhand properties like border-top-left-radius. This tool deliberately covers the common case — four equal-or-different pixel corners — and does not generate percentages, elliptical (slash) syntax, or longhand. It is a fast way to dial in a shape visually and grab clean, paste-ready CSS rather than a complete editor for every border-radius feature.