Menu
I want to make the background of my inner div stick with the outer div border, but even with no border radius, there is a small space between them. I tried some box-sizing and background-clip value but it don't seems to work and even if i use something like transform to make the div go up 10px, this little space stay.
It's not very obvious on the code snippet which is why I included this screenshot:
Is it something that can be solved ? I didn't find someone with the same problem yet, and it seems to happen in both Firefox and Chrome.
#outer{
height: 5rem;
width: 10rem;
background-color: red;
border: 2px solid blue;
border-radius: 1rem;
overflow: hidden;
}
#inner{
background-color: blue;
height: 2rem;
width: 100%;
}
#somecontent{
height: 3rem;
width: 100%;
}<div id="outer">
<div id="inner">
</div>
<div id="somecontent"></div>
</div>
465
asked Feb 27 '26 14:02
This is another trick, don't use background-color for the outer
instead, give background-color property to #inner and #inner2 and put your content inside inner2, now instead of a border, you can use box-shadow.
this way you can have both sharp edges and a border with a different color.
*,
*::before,
*::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
#outer {
height: 5rem;
width: 10rem;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 0 0 2px black;
margin: auto;
}
#inner {
background-color: blue;
height: 2rem;
width: 100%;
}
#inner2 {
height: 4rem;
background-color: red;
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
<div id="inner2"></div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With