Create Border In CSS that is inverted and doesnt add to the outside

Question

I was wondering how to create a border that doesnt add to the outside of a div but works it's way inside

#MenuBox {
    position: absolute;
    top: 10%;
    left: 2.5%;
    width: 95%;
    height: 80%;
    background-color: #5a5b54;
    z-index: 1;
    margin: -10px;
    border: 10px solid black;

}

tried using a margin although it didn't work

and would you care to share what's wrong with your script? or are we supposed to spend half an hour to find out what your problem is? Imagine you run a car shop and someone comes, gives you a photograph of a third of a car and says: how can I make this car drive again? — Piglet, Oct 25 '17 at 11:12
You can either (1) use `box-sizing: border-box`; (2) use a box-shadow as a border substitute and combine that with padding so that the box-shadow does not overlap with your content — Terry, Oct 31 '17 at 10:59

score 0 · Accepted Answer · answered Oct 31 '17 at 11:05

As per my comment, there are two solutions to your problem:

Solution 1: Use `border-box`

box-sizing: border-box will force the element's width and height computation to take into account border widths.

body {
  padding: 0;
  margin: 0;
}
#MenuBox {
    position: absolute;
    top: 10%;
    left: 2.5%;
    width: 95%;
    height: 80%;
    background-color: #5a5b54;
    z-index: 1;
    
    border: solid 10px black;
    
    /* Calculate border as part of width and height */
    box-sizing: border-box;
}

<div id="MenuBox">
#MenuBox
</div>

Solution 2: Use `box-shadow` as a border replacement

Using an inset box-shadow with a spread of 10px will mimic the effect of having a border, but this time it being within the bounds of the element. This effect is useful if you want to have multiple borders, but otherwise stick to solution #1.

body {
  padding: 0;
  margin: 0;
}
#MenuBox {
    position: absolute;
    top: 10%;
    left: 2.5%;
    width: 95%;
    height: 80%;
    background-color: #5a5b54;
    z-index: 1;
    
    /* Use box-shadow */
    box-shadow: inset 0 0 0 10px black;
    
    /* Use padding to offset content */
    padding: 10px;
    box-sizing: border-box;
}

<div id="MenuBox">
#MenuBox
</div>

Create Border In CSS that is inverted and doesnt add to the outside

1 Answers1

Solution 1: Use border-box

Solution 2: Use box-shadow as a border replacement

Solution 1: Use `border-box`

Solution 2: Use `box-shadow` as a border replacement