Border

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Learn how to use border and border-radius

border gives an element its outline. It's used a lot on buttons, cards, inputs, and image frames. border-radius lets you round the corners, and in modern UI, soft rounded corners give the page a gentler feel.

css

.card {
  border: 1px solid #d0d7de;
  border-radius: 12px;
  padding: 16px;
}

.alert {
  border-left: 4px solid tomato;
}

You should see

The card will look clean with rounded borders. The alert box will show a thick tomato-colored border on its left side.

Warning

If you make the border color too faint against the background with no contrast, users won't be able to see it. Think about accessibility too.