DEV Community

Cover image for How to Add a Border in CSS Without Changing Element Size
kandz
kandz

Posted on Originally published at tools.kandz.me

How to Add a Border in CSS Without Changing Element Size

#css #webdev #frontend #design

Using CSS border is the standard way to outline an element. But it has a side effect that breaks layouts: borders add to the element's total width and height.

If you have a 100px wide div and add a 5px border, it suddenly becomes 110px wide. In a tight grid or flexbox layout, this causes elements to overflow or wrap unexpectedly.

You can fix this globally by setting box-sizing: border-box, but sometimes you need a border that doesn't take up any space at all, or you want multiple borders on a single element.

The solution is to use box-shadow.

The Problem with Borders

Here is a standard box:

.box {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
}
Enter fullscreen mode Exit fullscreen mode

Total width: 104px. Total height: 104px.

If you're positioning this element absolutely, or fitting it into a strict grid, those extra 4 pixels matter.

The Solution: Hard Box Shadows

A box-shadow is normally used for fuzzy drop shadows, but if you set the blur and spread values correctly, it acts as a solid border.

.shadow-border {
  width: 100px;
  height: 100px;
  /* x-offset | y-offset | blur | spread | color */
  box-shadow: 0 0 0 2px blue;
}
Enter fullscreen mode Exit fullscreen mode

Total width: 100px. Total height: 100px.

Because shadows are drawn outside the box model and don't affect layout, the element's dimensions remain exactly 100x100.

The Inset Shadow

You can also use box-shadow to draw inside the element. Add the inset keyword.

.inner-shadow {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15);
}
Enter fullscreen mode Exit fullscreen mode

This creates a recessed, "pushed-in" look, useful for input fields or pressed buttons.

Layering Multiple Borders

The real power of box-shadow is that it accepts a comma-separated list. You can stack multiple borders on a single element.

.multi-border {
  box-shadow: 
    0 0 0 2px blue,
    0 0 0 4px red,
    0 0 0 6px green;
}
Enter fullscreen mode Exit fullscreen mode

This creates three distinct borders without adding a single wrapper div.

Common Gotchas

  • Border Radius: Box shadows follow the border-radius of the element. If your element is round, your shadow borders will be round.
  • Clipping: If the parent container has overflow: hidden, the outer shadow borders will get clipped and disappear.
  • Accessibility: Focus states using box-shadow are fine visually, but make sure they are distinct enough for keyboard users.

Prototyping Visually

Writing shadow borders by hand is tricky. You have to guess the spread and offset values, and one typo makes the border look fuzzy instead of crisp.

If you want to design and test multi-layered borders using CSS box-shadow without altering the box model, I built a free CSS Shadow Borders Designer.

What it does:

  • Designs crisp, multi-layered borders using box-shadow
  • Previews them without altering DOM dimensions
  • Exports clean CSS instantly

Try it here

100% client-side. Nothing uploaded.

Do you use box-shadow for borders, or do you rely on border and box-sizing? Let me know in the comments.

Top comments (0)