Can a border grow in?

Question

The general problem I am trying to solve is the alignment of stacked boxes (<div>) when some of them have a different border width.

Consider the two boxes below

.box {
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
}

.thick {
  border-width: 30px;
}

<div class="box"></div>
<div class="box thick"></div>

They are both of the same sizes, but the border is growing out of the box, breaking their alignment.

I can compensate for this with some tricks (shifting the box, having a thick transparent border, ...) but I would ideally like to keep the total size fixed, and grow the border "in".

Is this possible?

Yeah, it's called `box-sizing` and you need a value of `border-box`. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing — Roberto Zvjerković, Sep 07 '21 at 11:51
As Roberto said. I use to have `*{box-sizing:border-box}` as the first line in my css sheets — Alvaro Menéndez, Sep 07 '21 at 11:53
@RobertoZvjerković: Thanks! Would you mind turning this into an answer so that I can accept it? — WoJ, Sep 07 '21 at 11:56
@AlvaroMenéndez `*, *::before, *::after { box-sizing: border-box; }` — Roberto Zvjerković, Sep 07 '21 at 12:05

score 2 · Accepted Answer · answered Sep 07 '21 at 11:55

Maybe I do not understand what you mean, but if I do, you could maybe accomplish what you want with the "box-shadow" property. Like this:

.box {
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
}

.thick {
  box-shadow: inset 0px 0px 0px 29px green;
}

<div class="box"></div>
<div class="box thick"></div>

score 2 · Answer 2 · 2021-09-07T12:08:19.273

There is a way of accomplishing this by using the outline and outline-offset rule as shown in the example below.

*{
   box-sizing: border-box;
 }

.box {
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
}

.thick {
   outline: 10px solid red;
   outline-offset: -10px;
}

<div class="box"></div>
<div class="box thick"></div>

EDIT I also highly suggest you always use the border-box as shown in the snippet. This documentation about box-sizing will explain it more in detail.

Arezou Saremian · Answer 3 · 2021-09-07T12:09:15.493

2

.box {
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

.thick {
  border-width: 30px;
  margin-top: 10px;
}

<div class="box"></div>
<div class="box thick"></div>

edited Sep 07 '21 at 12:09

answered Sep 07 '21 at 11:58

Arezou Saremian

508
3
8

1

For the boxes to align perfectly, shouldn't the first box also have `box-sizing: border-box`? – tromgy Sep 07 '21 at 12:05
Your point was correct thank you. – Arezou Saremian Sep 07 '21 at 12:09

Can a border grow in?

3 Answers3