Loading…
Adjust the radius of each corner and generate the border-radius CSS.
border-radius: 12px;
Set the radius of each corner independently. When all four corners share the same value, the output is automatically collapsed to a single value. Paste the generated code straight into your CSS.
border-radius is the CSS property that rounds the corners of an element. You can set each of the four corners independently, and it is widely used for buttons, cards and similar UI.
Yes. Adjust the top-left, top-right, bottom-right and bottom-left corners with individual sliders. When all four share the same value, the output is automatically collapsed to a single value.
px, %, rem and em are supported. Choosing % produces smoother elliptical corners, giving you flexibility to create circular or rounded shapes.