CSS Border Radius

button {
  border-radius: 4px;
}

.avatar {
  border-radius: 50%;
}

Let me ask you something.

Have you ever noticed that almost no modern website uses perfectly sharp square corners anymore? Buttons are slightly rounded. Cards have soft edges. Profile pictures are perfect circles. Search bars are fully pill shaped.

That softness is not accidental. Rounded corners feel friendlier, more modern, and more approachable than sharp edges. And it is all done with one single CSS property — border-radius.

What is Border Radius

Border radius controls how rounded the corners of an element are. The higher the value the more rounded the corners become.

The button now has slightly rounded corners. Subtle but immediately softer than a sharp edged button.

Try increasing that value and watch what happens.

Now the button is fully pill shaped. The corners are so rounded they curve into each other creating that smooth oval look you see on a lot of modern buttons.

Border Radius on Individual Corners

Just like padding and margin you can control each corner separately. The order goes top left, top right, bottom right, bottom left — clockwise starting from the top left.

The top two corners are rounded and the bottom two are sharp. This is exactly the pattern used for modal windows and bottom sheets on mobile apps — rounded at the top, flat at the bottom where it meets the screen edge.

You can also use the individual properties.

.card {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Same result, more explicit. Use whichever feels cleaner to you.

Creating a Perfect Circle

Here is one of the most used tricks in CSS. If you have an element that is the same width and height — a perfect square — and you set border-radius to 50% it becomes a perfect circle.

A perfect red circle. This is exactly how profile pictures, avatars, and circular icons are made on every website and app you have ever used.

Border Radius on Images

Border radius works on images too. This is how you get those rounded profile photos.

The image is now a perfect circle. That object-fit: cover makes sure the image fills the circular space without stretching — we will cover object-fit in detail in its own lesson.

Using Percentage vs px

You can set border-radius using either px or percentage.

px gives you a fixed amount of rounding. border-radius: 8px always rounds by exactly 8 pixels no matter how big or small the element is.

% gives you rounding relative to the element size. border-radius: 50% always creates a perfect circle or oval shape relative to the element dimensions.

For buttons and cards use px. For circles and avatars use 50%.

Building the Netflix Clone

Let us round some corners on our Netflix clone. The buttons and the input field will feel much more modern with a little border radius.

Everything has a consistent 4px border radius now. The buttons feel modern and clickable. The input field matches. It is a small detail but it makes the whole thing feel more cohesive and designed.