📘 MODULE 3 – CSS Fundamentals

🖞ïļ Lesson 3.7 – Borders & Shadows

âœĻ Creating Professional Designs Using CSS Borders, Rounded Corners, and Shadow Effects

ðŸŽŊ Learning Objectives

After completing this lesson, students will be able to:

✅ Understand CSS Borders

✅ Apply Border Colors

✅ Change Border Width

✅ Use Different Border Styles

✅ Create Rounded Corners

✅ Add Box Shadows

✅ Add Text Shadows

✅ Design Professional Cards and Sections

📖 Introduction

Imagine two websites.

Website 1

 
--------------------------------
Student Profile
--------------------------------
 

Very plain.

Website 2

 
╭────────────────────â•Ū
│   Student Profile  │
╰────────────────────â•Ŋ

Beautiful Shadow Effect
 

Looks modern and professional.

The difference is created using:

🖞ïļ Borders & Shadows

ðŸĪ” What is a Border?

A Border is a line around an HTML element.

Example:

 
+----------------+
| Student Name   |
+----------------+
 

The outside line is called a border.

🌟 Why Use Borders?

Borders help:

✅ Highlight Content

✅ Separate Sections

✅ Improve Design

✅ Make Websites Professional

ðŸŽŊ Border Property

Syntax:

border: width style color;

Example

border:2px solid black;

Meaning

 
2px → Border Thickness

solid → Border Style

black → Border Color
 

Example Program

HTML

<h1>NextGen Dev Hub</h1>

CSS

h1{

border:2px solid black;

}

Output

Heading with black border.

ðŸŽĻ Border Width

Controls thickness.

Example

border:1px solid black;

Thin border.

border:5px solid black;

Thick border.

border:10px solid black;

Extra thick border.

ðŸŽĻ Border Color

Changes border color.

Example

border:2px solid red;

Red border.

border:2px solid blue;

Blue border.

border:2px solid green;

Green border.

ðŸŽĻ Border Styles

CSS provides different styles.

Solid Border

border:2px solid black;

Output:

 
────────────
 

Dashed Border

border:2px dashed red;

Output:

 
- - - - - - -
 

Dotted Border

border:2px dotted blue;

Output:

 
.............
 

Double Border

border:4px double green;

Output:

 
=============
=============
 

Groove Border

border:5px groove gray;

3D appearance.

Ridge Border

border:5px ridge black;

Raised effect.

Example

h1{

border:3px dashed red;

}

ðŸŽŊ Border on Individual Sides

Top Border

border-top:3px solid blue;

Bottom Border

border-bottom:3px solid green;

Left Border

border-left:3px solid red;

Right Border

border-right:3px solid orange;

Example

h1{

border-bottom:4px solid blue;

}

Creates underline effect.

🌟 Border Radius

One of the most important CSS properties.

Used to create:

Rounded Corners

Without Border Radius

 
+---------------+
| Student Card  |
+---------------+
 

With Border Radius

 
╭───────────────â•Ū
│ Student Card  │
╰───────────────â•Ŋ
 

Syntax

border-radius:value;

Example

border-radius:10px;

Example

div{

border:2px solid blue;

border-radius:15px;

}

Result

Rounded corners.

More Examples

border-radius:5px;

Slightly rounded.

border-radius:20px;

More rounded.

border-radius:50px;

Highly rounded.

🌟 Creating Circular Shapes

Example:

width:100px;

height:100px;

border-radius:50%;

Result

Perfect circle.

ðŸŽŊ Box Shadow

One of the most commonly used CSS effects.

Creates a shadow around elements.

Without Shadow

 
+-------------+
| Student Card|
+-------------+
 

Flat design.

With Shadow

 
+-------------+
| Student Card|
+-------------+
   ███████
 

Professional design.

Syntax

box-shadow:
horizontal
vertical
blur
color;

Example

box-shadow:5px 5px 10px gray;

Meaning

 
5px → Right

5px → Down

10px → Blur

Gray → Color
 

Example

div{

box-shadow:5px 5px 10px gray;

}

Result

Element gets shadow.

Strong Shadow

box-shadow:10px 10px 20px black;

Soft Shadow

box-shadow:3px 3px 8px gray;

ðŸŽŊ Text Shadow

Applies shadow to text.

Syntax

text-shadow:
horizontal
vertical
blur
color;

Example

text-shadow:2px 2px 4px gray;

CSS

h1{

text-shadow:2px 2px 4px gray;

}

Result

Stylish heading shadow.

🌟 Complete Example

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="card">

<h1>Rahul Kumar</h1>

<p>Polytechnic Student</p>

</div>

</body>

</html>

CSS

body{

background-color:#f5f5f5;

}

.card{

width:300px;

border:2px solid blue;

border-radius:15px;

box-shadow:5px 5px 15px gray;

padding:20px;

}

h1{

color:blue;

text-shadow:2px 2px 4px lightgray;

}

ðŸŽŊ Expected Output

✅ Card Layout

✅ Blue Border

✅ Rounded Corners

✅ Shadow Effect

✅ Professional Design

ðŸŦ Real World Example

Login Forms

border-radius:10px;

box-shadow:5px 5px 15px gray;

Profile Cards

border-radius:15px;

box-shadow:5px 5px 20px lightgray;

Modern Buttons

border-radius:25px;

Rounded buttons.

⚠ïļ Common Beginner Mistakes

Mistake 1

Using Very Thick Borders

Wrong:

border:20px solid red;

Looks unprofessional.

Use:

border:1px solid gray;

or

border:2px solid blue;

Mistake 2

Too Much Shadow

Wrong:

box-shadow:20px 20px 50px black;

Too strong.

Use soft shadows.

Mistake 3

Too Many Border Styles

Avoid mixing:

 
dashed

dotted

double

groove
 

on the same page.

🌟 Best Practices

✅ Use subtle borders.

✅ Use soft shadows.

✅ Use border-radius for modern designs.

✅ Maintain consistency.

✅ Use shadows sparingly.

🏆 Mini Project – Student Profile Card

Create:

Name

College

Branch

Inside a card.

Apply:

✅ Border

✅ Border Radius

✅ Box Shadow

✅ Text Shadow

📝 Practical Activity

Create a webpage containing:

Student Card

  • Blue Border
  • Rounded Corners
  • Shadow Effect

Inside Card:

  • Name
  • College
  • Branch

Run it in Chrome Browser.

📋 Assignment

Assignment 3.7

  1. What is a border?
  2. What is the purpose of border-radius?
  3. What is a box-shadow?
  4. What is a text-shadow?
  5. Name three border styles.
  6. Create a profile card using borders and shadows.
  7. Create a circular shape using CSS.

🧠 Quiz

Q1. Which property creates a border?

A. outline

B. border

C. line

D. frame

✅ Answer: B

Q2. Which property creates rounded corners?

A. round

B. corner

C. border-radius

D. radius

✅ Answer: C

Q3. Which property creates shadows around elements?

A. shadow

B. box-shadow

C. border-shadow

D. effect

✅ Answer: B

Q4. Which property creates shadow on text?

A. font-shadow

B. shadow-text

C. text-shadow

D. text-effect

✅ Answer: C

Q5. Which border style creates dotted lines?

A. solid

B. dashed

C. dotted

D. double

✅ Answer: C

📌 Lesson Summary

✅ Borders create outlines around elements.

✅ Border styles include solid, dashed, dotted, and double.

✅ Border-radius creates rounded corners.

✅ Box-shadow adds shadows to elements.

✅ Text-shadow adds shadows to text.

✅ Borders and shadows are widely used in modern web design.

PreviousNext