CSS Border Radius Generator

About the CSS Border Radius Generator

The CSS Border Radius Generator makes rounded corners easy. Control each of the four corners independently with sliders, in pixels or percentages, or link them to round all corners equally. A value of 50% on every corner turns a square into a perfect circle.

Click Random blob to generate organic, fluid shapes using the advanced eight-value border-radius syntax (horizontal and vertical radii separated by a slash). Blob shapes are popular for avatars, image masks, decorative backgrounds and playful landing pages, and they are lighter than SVG images.

Common border-radius recipes

/* Softly rounded card */
border-radius: 12px;

/* Pill-shaped button: any value larger than half the height */
border-radius: 999px;

/* Perfect circle (the element must be square) */
border-radius: 50%;

/* Only the top corners, for a tab or a card header */
border-radius: 12px 12px 0 0;

When you give four values, they go clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left.

Pixels or percentages?

• Pixels keep the same curve on every size, which looks consistent on buttons and cards of different widths.
• Percentages scale with the element. 50% makes circles and ovals, and percentage blobs keep their shape when resized.

Design tips

• Use one or two radius sizes across a whole site, for example 8px for small elements and 16px for large panels. Mixed radii make a design look accidental.
• For a card with an image at the top, also add overflow: hidden so the picture follows the rounded corners.
• Blob shapes from the random button work well as soft background decorations behind a heading or a product photo.

How to use the CSS Border Radius Generator

1. Drag the slider for each corner, or link all corners.
2. Switch between percent and pixel units.
3. Try Random blob for organic shapes.
4. Copy the border-radius CSS.

Frequently asked questions