Backgrounds & Borders

Backgrounds and borders shape an element's visual edges and surface - from a flat color card to a gradient hero banner with a soft shadow.

Background Properties

background-color sets a flat fill, background-image loads an image (or gradient), background-position places it, background-size controls how it scales (cover fills the box while cropping, contain fits it entirely), and background-repeat controls tiling.

Try it yourself

<div class="box"></div>

Output

Border Radius & Box Shadow

border-radius rounds corners - a small value softens a card, and 50% on a square element turns it into a circle. box-shadow adds depth with an offset-x, offset-y, blur, optional spread, and color, and can be layered with commas for more complex effects.

Try it yourself

<div class="card">A card with soft rounded corners and a shadow.</div>
<div class="circle"></div>

Output

Gradients

linear-gradient() blends colors along a straight line, with an optional angle or direction (to right, 45deg). radial-gradient() blends colors outward from a center point. Gradients are valid values for background-image, so they can even be layered on top of a background image.

Try it yourself

<div class="linear"></div>
<div class="radial"></div>

Output

Coding challenge

Build a rounded card with a linear-gradient background and a box-shadow.

<div class="card">Gradient card</div>

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. Which background-size value fills the entire box, cropping the image if needed?

2. What value of border-radius turns a square box into a circle?

3. Which property adds a soft drop-shadow effect around an element?

4. What does linear-gradient(to right, red, blue) do?