Borders and Shadows

🎨 CSS3+ 🟢 Chapter 15 of 49 📂 Phase 05: Box Model 📅 2026 Edition

📌 Covered in this chapter: Border Width · Style · Color · Border Radius · Rounded Cards · box-shadow · Multiple Shadows · Inset · Outline · Focus Outline · outline-offset · Visual Hierarchy

Welcome to Chapter 15: Borders and Shadows — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1Border Properties

CSS▶ Try in Editor

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  background: #fff;
}

.badge {
  border-width: 2px;
  border-style: dashed;
  border-color: #3b82f6;
  border-radius: 999px;
}

Shorthand: border: width style color; — Individual sides: border-top, border-left, etc.

2box-shadow — Depth & Visual Hierarchy

CSS

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.inset-panel {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.elevated {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 8px 24px rgba(0,0,0,0.08);
}

Syntax: box-shadow: x y blur spread color; — Multiple shadows comma-separated.

3Outline & Focus States (Accessibility)

CSS

button:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

/* Never remove focus without replacement */
button:focus {
  outline: none; /* ❌ Bad if no alternative */
}

Outline vs border: Outline layout affect cheyadu — focus rings ki ideal. Keyboard users ki visible focus mandatory.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026