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 seem 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>

Thomas is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

You could add the border-radius to the corners of the blue section and then oversize it a bit larger than the outer section and translate it into place to get it to just overlap enough to not show the white space. I zoomed in and out several times on Chrome and FF and couldn’t get it to show up doing it this way.

Edit: adjusted values ​​for border-box sizing as well

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#outer {
  display: block;
  height: 5rem;
  width: 10rem;
  background-color: red;
  border: 2px solid blue;
  border-radius: 1rem;
  margin: 2rem;
}

#inner {
  display: block;
  background-color: blue;
  height: 2rem;
  width: 9.9rem;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
  transform: translate(-1px, -1px);
}

#somecontent {
  height: 3rem;
  width: 100%;
}
<div id="outer">
  <div id="inner">
  </div>
  <div id="somecontent"></div>
</div>

Alternatively, if you don’t mind using an SVG you could do it that way. Here’s one I did real quick in Illustrator:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: block;
  margin: 2rem;
}
<div class="container">
  <svg id="rounded" x="0px" y="0px" width="188px" height="79px">
<path fill="red" stroke="blue" stroke-width="2px" d="M187.167,65.5c0,6.627-5.373,12-12,12H12.5
    c-6.627,0-12-5.373-12-12v-53c0-6.628,5.373-12,12-12h162.667c6.627,0,12,5.373,12,12V65.5z"/>
<path fill="blue" d="M187.167,12.5c0-6.628-5.373-12-12-12H12.5c-6.627,0-12,5.373-12,12v18.333h186.667V12.5z"/>
</svg>
</div>

…or with a container and positioning

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 2rem;
}

#outer {
  position: relative;
  height: 5rem;
  width: 10rem;
  background-color: red;
  border: 2px solid blue;
  border-radius: 1rem;
}

#inner {
  position: absolute;
  left: -1px;
  top: -1px;
  background-color: blue;
  height: 2rem;
  width: 9.9rem;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
}

#somecontent {
  height: 3rem;
  width: 100%;
}
<div class="container">
  <div id="outer">
    <div id="inner">
    </div>
    <div id="somecontent"></div>
  </div>
</div>

4

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>

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.