HTML & CSS - Mastery / CSS Basics

Setting Backgrounds and Borders

🎨 Backgrounds & Borders

Backgrounds and borders are two of the fastest ways to add visual structure to a page — color a section, frame a card, soften its corners.

🌈 Backgrounds

Almost any element — text, a div, a section, even the whole page — can take a background.

Basic syntax:

selector {
  background-color: lightblue;
}

The core properties:

Property

What it does

background-color

Fills the element with a solid color

background-image

Places an image behind the content

background-repeat

Controls whether that image tiles

background-size

Controls how the image scales to fit

Solid color example:

🚀 Try and Play Around

Image background:

💡 You can use an image from your local project folder (e.g. url("images/photo.jpg")) or paste a direct image link copied from the web (e.g. url("https://example.com/photo.jpg")).

no-repeat stops the image from tiling, and cover scales it to fill the element without distorting it.

🚀 Try and Play Around

📦 Borders

Borders frame an element, giving it a visible edge and a clearer boundary from whatever's around it.

Basic syntax:

selector {
  border: 2px solid black;
}

That one line sets three things at once: 2px thickness, a solid line style, and black color.

Each piece can be set on its own:

Property

What it controls

border-width

How thick the border is — e.g. border-width: 4px;

border-style

The line style — solid, dotted, dashed, etc.

border-color

The border's color — e.g. border-color: crimson;

border-radius

How rounded the corners are — e.g. border-radius: 10px;

🚀 Try and Play Around

💡 Example: Combine Background & Border

This will create a soft yellow card with a golden border and rounded edges.

✅ Quick Recap

PROPERTY

what it does

background-color

Sets the background color

background-image

Adds an image behind the content

border

Adds a frame around the element

border-radius

Rounds the corners of the border