CODEWITHSUNDEEP
htmlcss
Benjk
Benjk

Reputation: 57

white space between 2 borders

Is this fixable?

https://gyazo.com/9716e632d85339c13bc04920d901d8c8

If you zoom into the image you can see white space between the outside div border and the inside div background-color.

<div class="box">
 <div class="box-inner"></div>
</div>

.box {
 border: 2px solid black;
 border-radius: 10px;
}
.box-inner {
 border: 2px solid red;
 background-color: red;
 border-radius: 10px;
}

Upvotes: 2

Views: 926

Answers (3)

user7148391
user7148391

Reputation:

First Demo of the issue 

.box {
  border: 2px solid black;
  border-radius: 10px;
  width: 50px;
}

.box-inner {
  border: 2px solid red;
  background-color: red;
  border-radius: 10px;
  height: 50px;
}

body {
  zoom: 6;
}
<div class="box">
  <div class="box-inner"></div>
</div>

The issue is simple, When we define a radius it shapes the corner from the outside outer radius as well as the inside inner radius, inside is refereed to as padding edger radius (padding comes before border duh).

Your inner element's border radius didn't match the curve because you didn't respect the formula for the inner radius.

The formula for the inner radius is as follows:

Outer radius - border width = inner radius

In your case:

10px - 2px = 8px

Solution

Now we apply the math

.box {
  border: 2px solid black;
  border-radius: 10px;
  width: 50px;
}

.box-inner {
  border: 2px solid red;
  background-color: red;
  border-radius: 8px;
  height: 50px;
}
<div class="box">
  <div class="box-inner"></div>
</div>

Examples

Using css variables to do the math dynamically 

.box {
  border: var(--borderWidth) solid black;
  border-radius: var(--borderRaduis);
  width: 50px;
  display:inline-block;
}

.box-inner {
  border: 2px solid red;
  background-color: red;
  border-radius: calc(var(--borderRaduis) - var(--borderWidth));
  height: 50px;
}

body {
  zoom: 2;
}
<div class="box" style="--borderWidth:2px;--borderRaduis:10px">
  <div class="box-inner"></div>
</div>

<div class="box" style="--borderWidth:6px;--borderRaduis:15px">
  <div class="box-inner"></div>
</div>

<div class="box" style="--borderWidth:10px;--borderRaduis:15px">
  <div class="box-inner"></div>
</div>

<p> If the calculation result is negative, the inner radius fallsback to 0 </p>
<div class="box" style="--borderWidth:10px;--borderRaduis:6px">
  <div class="box-inner"></div>
</div>

Reference : https://drafts.csswg.org/css-backgrounds-3/#corner-shaping

Upvotes: 1

Timur
Timur

Reputation: 393

This problem appears becasue inner border radius is deferent from child outer border radius.

According to w3.org the inner-radius = outer-radius - border-width as was metiond by @Zohir Salak, the border radius of child element should be equals to inner border radous of parent element.

.box {
  border: 2px solid black;
  border-radius: 10px;
}

.box-inner {
  background-color: red;
  border-radius: calc(10px - 2px);
}
<div class="box">
    <div class="box-inner">Some text</div>
</div>

Another aproach is to remove border-radius and border from .box-inner, and add overflow: hidden; to .box element. This way child corners will overlap over parent rounded borders, we fix it by using overflow: hidden to trim the corners of child elemtn.

.box {
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden;
}
.box-inner {
  background-color: red;
}
<div class="box">
    <div class="box-inner">Some text</div>
</div>

Also such problem could be fixed be removing background color from .box-inner and adding it to .box. Where background of an element is a total size of content, padding and border. Find more on w3.org colors

.box {
 border: 2px solid black;
 border-radius: 10px;
 background-color: red;
}
.box-inner {
  //other css
}
<div class="box">
 <div class="box-inner">some text</div>
</div>

Upvotes: 5

Surendra Meena
Surendra Meena

Reputation: 160

This css should work for you.

.box {
 border: 2px solid black;
 border-radius: 12px;
//  width:50px; 
}
.box-inner {
/*  border: 2px solid red; */
 background-color: red;
 border-radius: 10px;
//  height: 50px;
//  width:50px;
}

Tip: Always attach codepen or some other online editor link.

Upvotes: 0

Related Questions