Can I use filter: drop-shadow on the body element?

Yes, filter: drop-shadow(0 0 10px #000); works similarly to box-shadow but applies to the element’s rendered image. It’s useful for SVGs and images.

Will the shadow affect layout?

No, box-shadow does not alter the element’s size or flow; it’s purely visual. If you need the shadow to influence layout, use an outer wrapper with padding.

2026-09-04 · Q&A guide

Add a Shadow to a CSS Border Using Box-Shadow

Learn how to add a subtle shadow to a border in CSS with the box-shadow property.

Why Border Shadows Don’t Work

The CSS "border" property only defines the line that surrounds an element. It has no built‑in shadow capability, so a declaration like "border: 10px shadow black" is invalid. To give a border a shadow you must use another visual effect that sits outside or inside the border.

Using box-shadow for a Border‑Like Shadow

The simplest way is to keep a solid border and add a box-shadow. The shadow will appear around the entire element, including the border.

body {
  width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 10px solid #000;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}

Inner Shadow and Outline Alternatives

If you want the shadow to appear inside the border, use an inset shadow. Or, if you need a thicker border effect, combine outline with box-shadow.

/* Inner shadow */
body {
  box-shadow: inset 0 0 10px rgba(0,0,0,.5);
}

/* Outline + shadow */
body {
  outline: 10px solid #000;
  outline-offset: -10px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}

Pseudo‑Element Trick for Complex Borders

For more control (e.g., rounded corners, multiple layers) wrap the content in a positioned pseudo‑element that carries the border and shadow.

body {
  position: relative;
  width: 800px;
  margin: 0 auto;
  background: #fff;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 10px solid #000;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  pointer-events: none;
}

Performance Tips and Browser Support

box-shadow is hardware accelerated in modern browsers and works on all major desktop and mobile engines. Avoid large blur radii on many elements, as that can cause jank. Use CSS variables if you need to tweak the shadow globally.

Takeaway: Use box-shadow or a pseudo‑element to create a shadow around a border; the border property itself cannot have a shadow.