LESSON 10

Borders

Learning objective: Add and style borders around elements.

Understand

Borders outline elements and help separate content.

The border shorthand sets width, style, and color, like 2px solid gray. border-radius rounds the corners. You can also style a single side, such as border-bottom.

Analogy: A border is like a picture frame around content.

See It in Action

A rounded, bordered box:

div {
  border: 2px solid #6c63ff;
  border-radius: 12px;
}
How it works: The border is 2px wide, solid, and violet; border-radius softens the corners into a rounded box.

Try It Yourself

  1. Add a solid border to a box.
  2. Round its corners with border-radius.
  3. Style only the bottom border of a heading.

Quick Quiz

Which property rounds an element's corners?

Challenge

Create a rounded card with a colored border.

Success condition: Your card has a visible border and rounded corners.