I have two divs, container and child. Both of them have the same border-radius: 25px, and there is a gap betewwn them, which I want to avoid

CodePudding user response：

Nesting radius

when nesting a radius, the inner radius should be smaller then the outer on. as there's less distance for the inner radius. in general you should consider the formula: outerRadius = innerRadius padding border

so in this case 25px = 21px 0px 4px

it can be helpfull to appy a negative margin on the inner element. to make sure the border overlaps the outer border.

.outer,
.outer-radius,
.outer-margin {
  background: orange;
  border: 4px solid blue;
  border-radius: 25px;
  display: inline-block;
}

.inner,
.inner-radius,
.inner-margin {
  background: olive;
  border: 4px solid lime;
  width: 150px;
  height: 150px;
}

.inner {
  border-radius: 25px;
}

.inner-radius {
  border-radius: 21px;
}

.inner-margin {
  border-radius: 21px;
  margin: -1px;
}

<div >
  <div ></div>
  smaller inner<br> negative margin
</div>

<div >
  <div ></div>
  smaller inner
</div>

<div >
  <div ></div>
  same radius
</div>