Sign in Get started

CSS Tutorial · CSS Basics · Lesson 5 of 19

CSS Backgrounds and Borders

Background images and gradients, borders, rounded corners and shadows.

Backgrounds

background can hold colours, images and gradients:

Example 1Try it yourself
<style>
  div { height: 70px; border-radius: 10px; margin: 8px 0; color: white; font: 600 14px system-ui; display: grid; place-items: center; }
  .linear { background: linear-gradient(135deg, #2563eb, #7c3aed); }
  .radial { background: radial-gradient(circle at top left, #f59e0b, #dc2626); }
  .pattern { background: repeating-linear-gradient(45deg, #0f766e 0 10px, #14b8a6 10px 20px); }
</style>
<div class="linear">linear-gradient</div>
<div class="radial">radial-gradient</div>
<div class="pattern">repeating-linear-gradient</div>

Borders, radius and shadows

  • border: 2px solid #94a3b8 — width, style, colour.
  • border-radius rounds corners (50% makes a circle).
  • box-shadow: x y blur spread colour adds depth; outline draws outside the border without taking space (used for focus rings).
Example 2Try it yourself
<style>
  body { display: flex; gap: 16px; padding: 12px; font: 13px system-ui; }
  .box { width: 90px; height: 90px; display: grid; place-items: center; background: white; }
  .a { border: 3px dashed #64748b; }
  .b { border: 2px solid #2563eb; border-radius: 16px; }
  .c { border-radius: 50%; background: #fde68a; }
  .d { border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / 20%); }
</style>
<div class="box a">dashed</div>
<div class="box b">rounded</div>
<div class="box c">circle</div>
<div class="box d">shadow</div>

Test yourself

Which value of border-radius turns a square into a circle?

  1. 100px
  2. 50%
  3. circle
  4. round
Show answer

Answer: 50%