Chapter 17 | Visual Styling

CSS Backgrounds & Borders

Backgrounds and borders give personality to sections, cards, buttons and banners. In this chapter, you will learn how to design modern webpage blocks with colors, images, gradients, radius and shadows.

Start Learning Try Design

background-color

Applies solid color behind an element.

background-image

Adds image or gradient background.

border

Adds visible boundary around an element.

border-radius

Creates smooth rounded corners.

Learning Objectives

After This Chapter, You Will Understand

This chapter helps you make sections, cards and banners visually attractive.

Background Color

Apply solid background colors to webpage elements.

Background Image

Use image backgrounds with size and position.

Borders

Create solid, dashed, dotted and custom borders.

Shadows

Add depth using box-shadow and soft card effects.

Background Basics

background-color and background

Background color is one of the most commonly used CSS properties.

1 Background Color

The background-color property applies a solid color behind the content of an element. It is used in sections, cards, buttons, badges and banners.

.card {
background-color: #ffffff;
}

Professional Tip: Use subtle background colors for study notes so students can read comfortably for longer time.

2 Background Shorthand

The background shorthand property can be used for color, image or gradient.

.hero {
background: #06285f;
}

.hero {
background: linear-gradient(135deg, #06285f, #0d6efd);
}

Navy Background

Solid Color

Used for headers, buttons and footers.

Soft Background

Light Color

Used for cards and note sections.

Highlight Background

Highlight Color

Used for tips and important notes.

Background Images

Using Images as Background

Background images are useful for hero sections, banners and decorative blocks.

3 Image Background

.banner {
    background-image: url("banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

4 Important Properties

background-image: sets the image path
background-size: controls image size
background-position: controls image placement
background-repeat: controls image repetition
background-attachment: controls scroll behavior

Remember: Use optimized images. Heavy background images can slow down your website.

Property	Use	Common Value
background-size	Controls image size	cover, contain, 100%
background-position	Controls image position	center, top, bottom, left
background-repeat	Controls repetition	no-repeat, repeat
background-attachment	Controls scroll behavior	scroll, fixed

CSS Gradients

Linear and Radial Gradients

Gradients create a premium and modern visual feel.

Linear Gradient

background: linear-gradient(135deg,#06285f,#0d6efd);

Radial Gradient

background: radial-gradient(circle,#00a7b5,#06285f);

Multi Color

Multi-Color

background: linear-gradient(135deg,#ff7a1a,#d6a549,#06285f);

Practice Task: Create a banner with a dark blue to teal gradient and white heading text.

CSS Borders

border and border-radius

Borders help separate elements and create beautiful cards, buttons and boxes.

5 Border Syntax

Border shorthand includes width, style and color.

.card {
border: 2px solid #0d6efd;
}

Order: border-width border-style border-color

6 Border Radius

Border radius creates rounded corners.

.card {
border-radius: 20px;
}

Design Tip: Rounded corners make cards and buttons look softer and modern.

Solid Border

solid

Clean and commonly used border style.

Dashed Border

dashed

Useful for upload boxes and highlights.

Dotted Border

dotted

Useful for light decorative separation.

Box Shadow

Adding Depth with box-shadow

Shadows make cards, buttons and panels look layered and premium.

Soft Premium Card Shadow

7 box-shadow Syntax

box-shadow uses horizontal offset, vertical offset, blur, spread and color.

.card {
box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

Simple Formula: box-shadow: x-offset y-offset blur color;

Try It Yourself

Practice Backgrounds and Borders

Edit background, border, radius and shadow values to see the design change.

HTML + CSS Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Backgrounds and Borders Practice</title>
    <style>
        body{
            font-family:Arial;
            background:#f5f9ff;
            padding:20px;
        }

.hero{
            background:linear-gradient(135deg,#06285f,#0d6efd,#00a7b5);
            color:white;
            padding:40px;
            border-radius:24px;
            text-align:center;
            box-shadow:0 18px 45px rgba(0,0,0,.18);
            margin-bottom:25px;
        }

.card{
            background:white;
            border:3px solid #0d6efd;
            border-radius:20px;
            padding:24px;
            max-width:520px;
            margin:auto;
            box-shadow:0 12px 30px rgba(15,23,42,.14);
        }

.badge{
            display:inline-block;
            background:#fff3cd;
            color:#7a4b00;
            border:1px dashed #d6a549;
            border-radius:999px;
            padding:8px 14px;
            font-weight:bold;
        }

h1{
            margin-bottom:10px;
        }

p{
            line-height:1.7;
            color:#334155;
        }
    </style>
</head>
<body>

<section class="hero">
        <h1>CSS Backgrounds & Borders</h1>
        <p>Design beautiful sections using gradients, radius and shadows.</p>
    </section>

<div class="card">
        <span class="badge">AICPE Learning Hub</span>
        <h2>Premium Course Card</h2>
        <p>This card uses background color, border, border-radius and box-shadow.</p>
    </div>

</body>
</html>

Output Preview Browser result

Practice Task: Change hero gradient, card border style, badge color and shadow strength.

Common Mistakes

Mistakes Students Should Avoid

Background and border styling should support readability and brand quality.

Wrong Habits

Using very busy background images behind text
Forgetting background-repeat: no-repeat
Using too many border styles on one page
Adding very dark or harsh shadows
Using low contrast between text and background

Correct Habits

Use readable background and text contrast
Use background-size: cover for hero banners
Use soft shadows for premium cards
Keep border radius consistent
Use gradients with balanced brand colors

Remember: Backgrounds should improve design, not disturb reading.

Quick Revision

Remember These Points

Revise these before moving to Chapter 18.

Background Color

background-color applies a solid color behind an element.

Background Image

background-image adds an image or gradient behind content.

background-size

cover is commonly used for full hero background images.

Border

Border includes width, style and color.

Border Radius

border-radius creates rounded corners.

Box Shadow

box-shadow adds depth and premium card effect.

Protected Learning Content

CSS Backgrounds & Borders

background-color

background-image

border

border-radius

After This Chapter, You Will Understand

Background Color

Background Image

Borders

Shadows

background-color and background

1 Background Color

2 Background Shorthand

Solid Color

Light Color

Highlight Color

Using Images as Background

3 Image Background

4 Important Properties

Linear and Radial Gradients

Linear Gradient

Radial Gradient

Multi-Color

border and border-radius

5 Border Syntax

6 Border Radius

solid

dashed

dotted

Adding Depth with box-shadow

Soft Premium Card Shadow

7 box-shadow Syntax

Practice Backgrounds and Borders

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Which property sets a solid background color?

2. Which value makes background image cover the full area?

3. Which function creates a smooth color transition?

4. Which property creates rounded corners?

5. Which property adds depth/shadow to a box?

Remember These Points

Background Color

Background Image

background-size

Border

Border Radius

Box Shadow