Card skeleton

Build the card skeleton with the box model.

Card skeleton

In this lesson you'll add four declarations to the .card class to set up the card's skeleton: width, padding, box sizing, and corner rounding.

Width sets the card's horizontal size. Padding creates breathing room between the content and the border. box-sizing: border-box makes the width include padding and border, so the card stays the size you expect. Corner rounding softens sharp corners and gives a modern look.

Corner rounding

The border-radius property sets how much the corners round. A small value (e.g. 4px) gives a slight softening, while a large value (e.g. 24px) gives a clear roundness.

The value can be a single number or split per corner: border-radius: 12px 8px 12px 8px follows the top-left, top-right, bottom-right, bottom-left order. A single value is enough for this lesson; one number applies to every corner for a consistent look.

Exercise Add the .card skeleton rule

Take the file with the header comment from the previous lesson. Below it, add a .card class selector rule with these declarations: width: 320px, padding: 24px, box-sizing: border-box, border-radius: 12px. End each declaration with a semicolon.

Show example solution

/* Alex Design - Portfolio card */

.card {
  width: 320px;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: #ffffff;
}

Test yourself

What does box-sizing: border-box do?
```
.card {
  box-sizing: border-box;
}
```
- Changes the background color
- Sets the typeface
- Includes padding and border in the width and height
- Centers the card on the page
Show answer

Includes padding and border in the width and height — Correct. border-box makes the width include padding and border; the card stays the size you expect.

Complete the card's corner rounding value

.card {
  border-radius: ____;
}

Show answer

.card {
  border-radius: 12px;
}

Match each property to its meaning

width

horizontal size
padding

inner space
box-sizing

box calculation
border-radius

corner rounding

Next lesson: Image and heading

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies