CSS Border Radius Explained: Create Perfect Rounded Corners

The CSS border-radius property controls how rounded the corners of an element should be. It is one of the simplest ways to make interfaces feel more modern, approachable and polished. Developers use it on buttons, cards, form inputs, images and containers to soften rigid rectangular edges.

Even a small radius can change the visual tone of a component. Sharp corners often feel formal or technical, while rounded corners usually make the UI feel friendlier and easier to scan. Because of that, border-radius is a small property with a big design impact.

How border-radius works in CSS

The border-radius property can accept from one to four values. This gives you precise control over each corner of the element. When you use one value, all corners get the same rounding. With two, three or four values, CSS distributes the values across the corners in a predictable order.

border-radius: 10px;

border-radius: 10px 20px;

border-radius: 10px 20px 30px 40px;

In practice, one value means every corner is equal. Two values usually split the rounding between opposite corners. Four values give full control in the order top-left, top-right, bottom-right and bottom-left. That makes it useful when you want asymmetrical shapes, custom cards or branded interface styles.

Example of CSS border radius

.box {
  border-radius: 20px;
}

This example rounds all four corners equally. If you apply it to a card, image container or button, the result is a clean and balanced shape. This is the most common usage because it is simple, readable and works well across many interface patterns.

Generate your border radius

Writing the values manually is easy for basic cases, but a generator is much faster when you want to test different corner combinations visually. You can use our tool to preview rounded corners live and copy the CSS immediately.

CSS Border Radius Generator Open local tool page

Tips for using border-radius in modern UI

Use small radius values for subtle UI.
Use larger radius for cards and buttons.
Use 50% for circles.

These rules keep the interface consistent. Small values such as 4px or 8px usually work well for inputs and compact controls. Larger values can make cards and call-to-action buttons feel softer and more contemporary. When you want a perfectly circular avatar or badge, set equal width and height and use border-radius: 50%;.

FAQ

What does border-radius do in CSS?

It rounds the corners of an HTML element by applying a radius value to the box edges.

Can I round only one corner?

Yes. You can target corners individually with four values or with specific corner properties such as border-top-left-radius.

How do I create a circle with CSS?

Give the element equal width and height, then set border-radius: 50%;. This works for circles, avatars and icon containers.