CSS3 Borders & Backgrounds

🎯 CSS3 Enhanced Styling

CSS3 introduced powerful new features for borders and backgrounds, including border-radius for rounded corners, box-shadow for depth, border-image for custom borders, and gradients for colorful backgrounds without images.

CSS3 Border & Background Features:

✅ Border-radius for rounded corners
✅ Box-shadow for depth and elevation
✅ Border-image for decorative borders
✅ Multiple backgrounds on one element
✅ Linear and radial gradients
✅ Background-size and background-clip

⭕ Border Radius

The border-radius property creates rounded corners on elements.

Basic Border Radius:

/* All corners equal */
.box {
    border-radius: 10px;
}

/* Different corners */
.box {
    border-radius: 10px 20px 30px 40px;
    /* top-left, top-right, bottom-right, bottom-left */
}

/* Circle */
.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

/* Ellipse */
.oval {
    width: 300px;
    height: 200px;
    border-radius: 50%;
}

Border Radius Examples:

10px radius

25px radius

Circle

Mixed

Individual Corners:

/* Specific corners */
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

/* Horizontal / Vertical radius */
border-radius: 50px / 25px;  /* Creates elliptical corners */

🌑 Box Shadow

The box-shadow property adds shadow effects around an element's frame.

Syntax:

/* Syntax: h-offset v-offset blur spread color */
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);

/* Multiple shadows */
box-shadow: 
    2px 2px 5px rgba(0, 0, 0, 0.3),
    -2px -2px 5px rgba(255, 255, 255, 0.5);

/* Inset shadow (inner) */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

Common Shadow Patterns:

/* Subtle shadow */
.card {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Material Design elevation */
.elevated {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Glow effect */
.glow {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
}

/* Neumorphism */
.neumorphic {
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.2),
        -8px -8px 16px rgba(255, 255, 255, 0.7);
}

/* Pressed effect */
.pressed {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

Box Shadow Examples:

Subtle

Elevated

Glow

Neumorphic

🖼️ Border Image

The border-image property allows you to use an image as the border of an element.

/* Using an image as border */
.fancy-border {
    border: 10px solid transparent;
    border-image: url('border.png') 30 round;
}

/* Gradient border */
.gradient-border {
    border: 5px solid;
    border-image: linear-gradient(45deg, #667eea, #764ba2) 1;
}

/* Border image properties */
border-image-source: url('border.png');
border-image-slice: 30;
border-image-width: 10px;
border-image-repeat: round;  /* or stretch, repeat, space */

Gradient Border Example:

Element with gradient border

🎨 Multiple Backgrounds

CSS3 allows multiple background images on a single element.

/* Multiple backgrounds (stacked) */
.element {
    background: 
        url('top-pattern.png') top left no-repeat,
        url('bottom-pattern.png') bottom right no-repeat,
        linear-gradient(135deg, #667eea, #764ba2);
}

/* Each background can have different properties */
.complex {
    background-image: 
        url('overlay.png'),
        url('texture.png'),
        linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
    background-position: 
        center,
        top left,
        center;
    background-size: 
        cover,
        200px 200px,
        cover;
    background-repeat: 
        no-repeat,
        repeat,
        no-repeat;
}

📊 Linear Gradients

Linear gradients create smooth color transitions along a straight line.

Basic Linear Gradient:

/* Top to bottom (default) */
background: linear-gradient(#667eea, #764ba2);

/* Direction keywords */
background: linear-gradient(to right, red, blue);
background: linear-gradient(to bottom right, red, blue);

/* Angle */
background: linear-gradient(45deg, red, blue);
background: linear-gradient(180deg, red, blue);

/* Multiple colors */
background: linear-gradient(to right, red, yellow, green, blue);

/* Color stops */
background: linear-gradient(to right,
    red 0%,
    yellow 25%,
    green 50%,
    blue 100%
);

Linear Gradient Examples:

Horizontal

Diagonal (45deg)

Vertical

With Color Stops

Advanced Linear Gradients:

/* Transparent gradient */
background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.8),
    transparent
);

/* Striped pattern */
background: linear-gradient(45deg,
    #667eea 25%,
    #764ba2 25%,
    #764ba2 50%,
    #667eea 50%,
    #667eea 75%,
    #764ba2 75%
);
background-size: 40px 40px;

/* Subtle gradient */
background: linear-gradient(to bottom,
    #ffffff,
    #f5f5f5
);

⭕ Radial Gradients

Radial gradients create circular or elliptical color transitions from a center point.

/* Basic radial gradient */
background: radial-gradient(#667eea, #764ba2);

/* Circle shape */
background: radial-gradient(circle, #667eea, #764ba2);

/* Ellipse (default) */
background: radial-gradient(ellipse, #667eea, #764ba2);

/* Size keywords */
background: radial-gradient(circle closest-side, red, blue);
/* closest-side, farthest-side, closest-corner, farthest-corner */

/* Position */
background: radial-gradient(circle at top right, red, blue);
background: radial-gradient(at 30% 40%, red, blue);

/* Multiple color stops */
background: radial-gradient(circle,
    red 0%,
    yellow 30%,
    green 60%,
    blue 100%
);

Radial Gradient Examples:

Circle

Ellipse

Positioned

With Stops

🎯 Conic Gradients

Conic gradients rotate colors around a center point (like a pie chart).

/* Basic conic gradient */
background: conic-gradient(red, yellow, green, blue, red);

/* From angle */
background: conic-gradient(from 45deg, red, blue);

/* At position */
background: conic-gradient(at 30% 40%, red, blue);

/* Pie chart effect */
background: conic-gradient(
    red 0deg 90deg,
    blue 90deg 180deg,
    green 180deg 270deg,
    yellow 270deg 360deg
);

/* Color wheel */
background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
);

Conic Gradient Examples:

📏 Background Size & Clip

Background Size:

/* Cover entire container */
background-size: cover;

/* Contain within container */
background-size: contain;

/* Specific size */
background-size: 200px 100px;

/* Responsive */
background-size: 100% auto;

Background Clip:

/* Background clips to different areas */
background-clip: border-box;  /* Default */
background-clip: padding-box; /* Inside border */
background-clip: content-box; /* Inside padding */
background-clip: text;        /* Clips to text (with -webkit-) */

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Gradient Text Example:

Gradient Text!

💼 Practical Real-World Examples

Example 1: Modern Card

.card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

Example 2: Gradient Button

.gradient-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    transition: all 0.3s;
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

Example 3: Neumorphic Element

.neumorphic {
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: 
        10px 10px 20px rgba(0, 0, 0, 0.1),
        -10px -10px 20px rgba(255, 255, 255, 0.7);
    padding: 30px;
}

.neumorphic:active {
    box-shadow: 
        inset 5px 5px 10px rgba(0, 0, 0, 0.1),
        inset -5px -5px 10px rgba(255, 255, 255, 0.7);
}

Example 4: Glass morphism

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

Example 5: Animated Gradient Background

.animated-gradient {
    background: linear-gradient(
        45deg,
        #667eea, #764ba2, #f093fb, #4facfe
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

🎨 Live Examples

Modern Card with Shadow:

Beautiful Card

This card has rounded corners and a subtle shadow for depth.

Gradient Button:

Neumorphic Design:

Neumorphic Element

📝 Test Your Knowledge - MCQ

💪 Practice Questions

Create a card with 20px border-radius, white background, and a subtle box-shadow.
Make a circular profile image container (150px × 150px) using border-radius.
Create a button with a gradient background (purple to pink) and hover effect that lifts it up.
Design gradient text that goes from blue to purple using background-clip.
Create a neumorphic button with proper shadows for both normal and pressed states.

📌 Summary

border-radius: Creates rounded corners (use 50% for circles)
box-shadow: Adds depth with shadows (h-offset v-offset blur spread color)
box-shadow: inset: Creates inner shadows (pressed effect)
border-image: Uses images or gradients as borders
Multiple Backgrounds: Stack multiple images/gradients on one element
linear-gradient: Color transitions along a line (use to right, 45deg, etc.)
radial-gradient: Circular/elliptical color transitions from center
conic-gradient: Rotating colors around center (pie chart effect)
background-size: cover (fills container), contain (fits within)
background-clip: text: Clips gradient to text for colorful typography
Neumorphism: Soft UI with double shadows (light + dark)
Best Practice: Use subtle shadows and smooth gradients for modern designs