🎨 CSS COURSE – MODULE 11: BACKGROUNDS & BORDERS

📁 File: backgrounds.md

🎨 Backgrounds & Borders

📌 Introduction

CSS backgrounds and borders control:

• visual style
• depth
• UI appearance
• modern design effects

👉 They are essential for building professional interfaces.

🎨 1. Background Color

div {
  background-color: lightblue;
}

✔ Sets solid background color

🖼️ 2. Background Image

div {
  background-image: url("image.jpg");
}

✔ Adds image as background

📏 3. Background Size

div {
  background-size: cover;
}

Values:

• cover → fills area
• contain → fits inside

📍 4. Background Position

div {
  background-position: center;
}

✔ Controls image placement

🔁 5. Background Repeat

div {
  background-repeat: no-repeat;
}

Options:

• repeat
• no-repeat
• repeat-x
• repeat-y

6. Gradient Backgrounds (VERY IMPORTANT)

div {
  background: linear-gradient(to right, blue, purple);
}

✔ Modern UI design feature

🧠 Gradient Types

Linear Gradient

background: linear-gradient(to right, red, blue);

Radial Gradient

background: radial-gradient(circle, red, yellow);

🧱 7. Borders

div {
  border: 2px solid black;
}

Structure:

border: width style color;

🎯 8. Border Radius (MODERN UI)

div {
  border-radius: 10px;
}

✔ Makes rounded corners ✔ Used in all modern websites

🧊 9. Box Shadow (DEPTH EFFECT)

div {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

✔ Adds shadow ✔ Creates 3D effect

🧩 Real Example

<div class="card">Hello CSS Design</div>

.card {
  width: 200px;
  padding: 20px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: white;
}

🎨 Modern UI Combination

background + border-radius + box-shadow

✔ This is what real apps use

⚠️ Common Mistakes

• Using too many background images ❌
• Overusing shadows ❌
• No consistent border radius ❌
• Poor color contrast ❌

🎯 Pro Tip

👉 Modern design rules:

• soft shadows (not harsh)
• smooth gradients
• rounded corners
• simple colors

🧪 Mini Exercise

Create:

1. A card with gradient background
2. A box with border + radius
3. A section with background image
4. A shadowed button
5. A full-width banner with gradient