How to use borders and shadows

Draw a border

Border shorthand combines width, style, and color. A border is part of the box model.

.panel {
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
}

Add a box shadow

A shadow accepts horizontal offset, vertical offset, blur, spread, and color.

.card {
  box-shadow: 0 0.5rem 1.5rem rgb(15 23 42 / 12%);
}

Style text shadows sparingly

Small text shadows can help display text over an image, but heavy effects reduce legibility.

.hero-title {
  text-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}

Preserve focus outlines

An outline does not take layout space and is important for keyboard focus. Never remove it unless an equally visible replacement is supplied.

• Prefer subtle shadows over many layered effects
• Check rounded corners with overflowing child content
• Use borders when a boundary must remain clear in high-contrast modes