Topic 11 of 30
Borders & Shadows
Overview
Borders and shadows are key design tools for creating depth, emphasis, and visual separation between UI elements. CSS box-shadow and text-shadow support multiple layers, enabling glassmorphism and neumorphism effects.
Syntax
css
/* Border */
border: 1px solid #FFD700;
border-radius: 8px; /* or 50% for circles */
border-top: 3px solid gold;
border-image: linear-gradient(90deg, gold, orange) 1;
/* Box Shadow */
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* inset */
/* Multiple shadows */
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 8px 32px rgba(255,215,0,0.15);
/* Text Shadow */
text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);Common Pitfalls
- border-radius: 50% makes circles only if the element is a perfect square (equal width and height).
- Multiple box-shadows are comma-separated — the first is rendered on top.
- Interview tip: outline is different from border — it doesn't affect layout (no box model space) and is used for focus indicators.
Real-World Example
A glassmorphism card using border and box-shadow:
example
css
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 215, 0, 0.2);
border-radius: 16px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Glow effect on hover */
.card:hover {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 215, 0, 0.5),
0 0 24px rgba(255, 215, 0, 0.2);
transition: box-shadow 0.3s ease;
}