CSS Border Radius Generator

CSS Border Radius

The border-radius property rounds the corners of an element. When all four values are equal, a shorthand single value is used. Different values create asymmetric shapes — a pill uses 50% on all corners, a leaf uses 0% and 50% alternating.

Click any corner number to type a value directly, or drag the linked slider to change all four corners at once. Toggle Lock all corners off to control each corner independently.