Shadow and border

CSS course · Beginner · Lesson 52/82

Add depth to the card with shadow and border.

Shadow and border

In this lesson you'll add a shadow and a border to the .card rule. These two properties give the card depth and a frame.

box-shadow draws a shadow under the card. Values are written in order: horizontal offset, vertical offset, blur, and color, e.g. 0 4px 12px rgba(0,0,0,0.08). The border shorthand gives the thickness, style, and color in one line: 1px solid #e2e8f0.

Shadow values

A box-shadow value has four parts: horizontal offset, vertical offset, blur radius, and color. Example: 0 4px 12px rgba(0,0,0,0.08).

When the horizontal offset is 0, the shadow falls straight under the card. The vertical offset 4px pushes the shadow down. The blur 12px softens it. The color rgba(0,0,0,0.08) gives a very faint black so the shadow isn't loud. You can write multiple shadows separated by commas.

Exercise Add a shadow and a border to the .card rule

Take the file from the previous lesson. Add two new declarations to the .card rule: border: 1px solid #e2e8f0 and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08).

Show example solution

/* Alex Design - Portfolio card */

.card {
  width: 320px;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-hero {
  background-image: url("cover.jpg");
  background-size: cover;
  height: 140px;
}

.card-title {
  color: #2a3d66;
  font-family: Georgia, serif;
}

Test yourself

Which one is a valid border shorthand?
```
.card {
  /* ? */
}
```
- border-color: #e2e8f0
- border-style: solid
- border-image: 1px
- border: 1px solid #e2e8f0
Show answer

border: 1px solid #e2e8f0 — Correct. The border shorthand gives thickness, style, and color in order: 1px solid #e2e8f0.

Complete the .card shadow color

.card {
  box-shadow: 0 4px 12px ____;
}

Show answer

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

Match each shadow value to its meaning

0

horizontal offset
4px

vertical offset
12px

blur radius
rgba(0,0,0,0.08)

shadow color

Take this lesson interactively

A 6-step interactive lesson: short explanations, questions and coding tasks. Free, and your progress is saved.

Start lesson

Try it yourself

index.html

/* Alex Design - Portfolio card */

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

.card-hero {
  background-image: url("cover.jpg");
  background-size: cover;
  height: 140px;
}

.card-title {
  color: #2a3d66;
  font-family: Georgia, serif;
}

Shadow and border