Chapter 3.1☕ 14 min read

Shadows & Border Effects

Box-shadow, border-radius — add depth and polish to any element. Shadows make UI feel 3D and professional.

01Understanding Box Shadow

The box-shadow property adds shadows to elements. It's one of the most effective ways to add depth and visual hierarchy to your designs.

🕌

Analogy: Just like Charminar casts a shadow on the ground, CSS shadows give elements a sense of depth and position.

/* Syntax: offset-x offset-y blur-radius spread-radius color inset */
.card {
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
}

PartDescription

offset-xHorizontal shadow position. Negative = left.

offset-yVertical shadow position. Negative = up.

blur-radiusHow blurry the shadow is. Higher = softer.

spread-radiusHow large the shadow is. Positive = larger.

colorShadow color. Use rgba/hsla for transparency.

insetMakes shadow go inside the element instead of outside.

02Box Shadow Properties

Box-shadow has five parameters that give you precise control:

/* Basic shadow — subtle depth */
.card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* Large blur — soft, spread out */
.card { box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

/* Spread radius — extends shadow edge */
.card { box-shadow: 0 4px 6px 2px rgba(0,0,0,0.1); }

/* Inset shadow — shadow inside element */
.card { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

/* Multiple shadows — comma separated */
.card { box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.05); }

/* No offset — even glow */
.glow { box-shadow: 0 0 20px rgba(249,115,22,0.4); }

03Border Radius

The border-radius property rounds the corners of elements. It's the simplest way to make UI feel softer and more modern.

/* All corners same */
.box { border-radius: 8px; }

/* Individual corners */
.box { border-top-left-radius: 8px; border-top-right-radius: 4px; border-bottom-right-radius: 8px; border-bottom-left-radius: 4px; }

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

/* Circle — use 50% on a square */
.circle { border-radius: 50%; width: 100px; height: 100px; }

/* Pill shape */
.pill { border-radius: 9999px; padding: 8px 24px; }

/* Only top corners */
.box { border-radius: 12px 12px 0 0; }

04Practical Examples

Real-world patterns combining shadows and border-radius:

/* Card with subtle shadow */
.card { background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.1); }

/* Floating button */
.btn-float { box-shadow: 0 6px 12px rgba(0,0,0,0.15); border-radius: 50%; }

/* Image with hover shadow */
.img:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* Avatar circle */
.avatar { border-radius: 50%; width: 48px; height: 48px; object-fit: cover; }

05Exercise — Shadows & Effects

Practice shadows and border-radius below.

Try these experiments:

Add box-shadow with offset-x: 5px, offset-y: 5px, blur: 10px Make a circle using border-radius: 50% Add a second shadow — comma separate two shadows Try inset shadow — see how it feels inside the element Create a pill button with border-radius: 9999px

Done — Key Points:

✅ box-shadow: offset-x offset-y blur spread color — 5 parameters for precise control.
✅ border-radius rounds corners. 50% makes a circle, 9999px makes a pill.
✅ Use rgba() for shadow colors — transparency makes shadows look natural.
✅ Multiple shadows can be applied by comma-separating them.
✅ inset creates an inner shadow. Useful for pressed/sunken effects.

Previous2.6 — Responsive Web Design 📋 All Chapters Next Chapter3.2 — Transitions →