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