CSS Backgrounds & Borders

Add W3Buddy as a preferred source on Google

हि En

🔊 Listen

In this lesson, we’ll explore how to beautifully design backgrounds and borders in CSS. From setting a background image to adding gradients and creating neat card effects with box-shadow and border-radius, you’ll learn all the essential visual tricks used in real websites.

background Property – The Basics

body {
  background-color: #f5f5f5;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

You can combine all like this:

background: #f5f5f5 url("bg.jpg") no-repeat center top / cover;

background-size

• cover – fills entire area (may crop)
• contain – fits image fully inside

background-size: cover;

background-repeat

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

background-position

Set X and Y position
Example: center center, top left, 50% 20px

background-attachment

• scroll (default), fixed (parallax effect)

background-clip

Controls how far background extends:

.box {
  background-clip: padding-box;
}

• border-box: includes border
• padding-box: up to padding
• content-box: only content area

background-blend-mode

Blends background layers like Photoshop:

.box {
  background-color: red;
  background-image: url("texture.jpg");
  background-blend-mode: multiply;
}

Common values: multiply, overlay, screen, darken, lighten

CSS Gradients

Linear Gradient:

cssCopyEditbackground: linear-gradient(to right, #4facfe, #00f2fe);

Radial Gradient:

background: radial-gradient(circle, #ff9a9e, #fad0c4);

Layered example:

background: 
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
  url("image.jpg");

CSS Borders

Basic Border:

border: 2px solid #333;

Individual sides:

border-top: 1px solid red;
border-radius: 8px;

Rounded Corners:

border-radius: 12px;

Individual corners:
border-top-left-radius, etc.

box-shadow

Adds shadow around boxes:

box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);

Syntax: horizontal, vertical, blur, spread, color

box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* inner shadow */

Quick Card Example

.tutorials-card {
  background: linear-gradient(to right, #fff, #f0f0f0);
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

✅ Summary Covered

• Background: color, image, repeat, size, position, clip, attachment, blend
• Gradients: linear and radial
• Borders: full and side borders, radius
• Box Shadow: outer and inner shadows