Add box-sizing: border-box; in .overlay will work.
.container {
background: pink;
width: 40rem;
height: 25rem;
display: flex;
flex-wrap: wrap;
}
.box {
background: yellow;
width: 8rem;
height: 8rem;
margin: 1rem;
position: relative;
}
.overlay {
border: 0.75rem solid red;
position: absoulte;
width: 100%;
height: 100%;
box-sizing: border-box; /* Use box-sizing */
}<div class="container">
<div class="box">
<div class="overlay"></div>
</div>
<div class="box">
<div class="overlay"></div>
</div>
<div class="box">
<div class="overlay"></div>
</div>
<div class="box">
<div class="overlay"></div>
</div>
<div class="box">
<div class="overlay"></div>
</div>
</div>
This question already has answers here :
Closed 2 years ago .
I have a series of divs that each have an overlay div on top of them. I want this overlay to have a perfect border around the original parent div but instead get an off centered border for the overlay. How do I make sure that the border of the child div is properly aligned? Thanks.
.container {
background: pink;
width: 40rem;
height: 25rem;
display: flex;
flex-wrap: wrap;
}
.box {
background: yellow;
width: 8rem;
height: 8rem;
margin: 1rem;
position: relative;
}
.overlay {
border: 0.75rem solid red;
position: absoulte;
width: 100%;
height: 100%;
}<div class="container">
<div class="box">
<div class="overlay"></div>
</div>
<div class="box">
<div class="overlay"></div>
</div>
<div class="box">
<div class="overlay"></div>
</div>
<div class="box">
<div class="overlay"></div>
</div>
<div class="box">
<div class="overlay"></div>
</div>
</div>
