CSS Border Radius

border-radius rounds the corners of an element. The larger the value, the rounder the corner.

1
2
3
4
5
6
7
8
9

<style>
  .box { background: #1a5276; color: white; padding: 14px; margin-bottom: 8px; }
  .a { border-radius: 4px; }
  .b { border-radius: 16px; }
  .c { border-radius: 30px 4px; }
</style>
<div class="box a">4px: slightly soft</div>
<div class="box b">16px: friendly card</div>
<div class="box c">30px 4px: top-left and bottom-right are round</div>

One to four values

Like margins, you can give several values. With four, they go top-left, top-right, bottom-right, bottom-left. With two, the first is for top-left and bottom-right, and the second for the other pair.

Circles and pills

1
2
3
4
5
6

<style>
  .avatar { width: 80px; height: 80px; border-radius: 50%; background: #d94a00; display: inline-block; vertical-align: middle; }
  .pill { border-radius: 999px; background: #1a5276; color: white; padding: 8px 20px; display: inline-block; }
</style>
<span class="avatar"></span>
<span class="pill">Add to basket</span>

• 50% on a square element makes a perfect circle. On a rectangle it makes an oval.
• A very large value such as 999px makes the shortest sides fully round: a pill. The browser caps the radius, so there is no harm in using a big number.

It clips the background, not the content

The background and border follow the rounded corners, but child content that reaches the corner can still poke out. Add overflow: hidden to the rounded element to clip images inside it. See CSS Overflow.

1

img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }