Make inner div background stick to outer div border-CodePudding

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>

CodePudding user response：

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 >
  <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 >
  <div id="outer">
    <div id="inner">
    </div>
    <div id="somecontent"></div>
  </div>
</div>

CodePudding user response：

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>

CodePudding user response：

Try this on fullscreen:

* {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

body {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: black;
  line-height: 1;
}

.modal {
  background-color: green;
  min-width: 800px;
  border: 4px solid green;
  border-radius: 10px;
  overflow: hidden;
}

.modal__header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.modal__title {
  font-size: 44px;
  color: white;
  margin-right: auto;
}

.modal__icon {
  font-size: 30px;
}

.modal__content {
  background-color: white;
  min-height: 300px;
}

<div >
  <div >
    <span >VM00010</span>
    <div >