×

css · level 1 · unit 6 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

rounds off the corners.

Sharp corners can look stiff. border-radius rounds them off. A small value like 4px softens them, and a bigger value like 20px makes them really round.

It works with or without a border, because it shapes the background too. Buttons, cards and photos often have rounded corners.

On a square, border-radius: 50% rounds the corners so far that they meet in the middle of each side, and you get a circle. Profile photos are often done this way.

<div class="pill">Rounded</div>
<img class="avatar" src="cat.svg" alt="A cat">
.pill {
  background-color: plum;
  padding: 12px;
  border-radius: 12px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Press show my page to see it here.

Try 0 on the pill to bring the sharp corners back.