How to make rounded corners

Short answer

border-radius sets the rounding radius:

<div style="padding: 16px; background: lavender; border-radius: 12px;">Rounded card</div>

Single corners

Four values go clockwise from the top-left corner. Rounding only the top:

<div style="padding: 16px; background: honeydew; border-radius: 16px 16px 0 0;">Rounded top</div>

A pill

A very large radius turns a rectangle into a pill — handy for buttons and tags. Unlike percentages, it does not turn a wide element into an oval:

<button style="padding: 8px 20px; border: none; border-radius: 999px; background: royalblue; color: white;">Subscribe</button>
<button style="padding: 8px 20px; border: none; border-radius: 50%; background: tomato; color: white;">50% makes an oval</button>

An image in a rounded card

An image inside does not know about the parent's rounding and its corners stick out. overflow: hidden on the card clips it:

<div style="width: 200px; border-radius: 16px; overflow: hidden; background: whitesmoke;">
  <img src="/media/photo-400x250.jpg" alt="" style="width: 100%; display: block;">
  <p style="margin: 8px;">Lake view</p>
</div>

Common mistake

Rounding an element with no background or border: the radius is there but invisible — an invisible edge gets rounded. Give the element a background, border or shadow first, then the corners show.

Thanks for reading!