Backgrounds, Borders and Shadows

Introduction

Now you know the box, you can decorate it. Backgrounds, rounded corners and shadows turn a plain rectangle into something that looks like a button or a card on a modern website.

Backgrounds

background-color fills the box. background-image can draw an image or a gradient instead.

linear-gradient(angle, colour, colour) blends colours. 135deg points towards the bottom right.

Borders and rounded corners

The border shorthand sets width, style and colour. border-radius rounds the corners.

A very large radius, like 999px, makes the ends fully round.

Shadows

box-shadow adds a shadow behind the box. The values are: horizontal offset, vertical offset, blur, then colour.

Soft, low-opacity shadows look more natural than sharp black ones.

Try it yourself

Build a button. Give it a gradient background, white bold text, padding, no border, rounded corners and a shadow.

Summary

• background-color and background-image (including linear-gradient) fill the box.
• border and border-radius outline and round it.
• box-shadow adds depth. Keep it soft.