Child div does not fill the parent div when using rounded corners

Question

Per the title, you can see a demo of the issue here.

Here is the HTML code:

<div id="outer">
    <div id="inner">
    </div>
</div>

Here is the CSS code:

#inner{
  height: 100%;
  width: 100%;
    border-radius: 20px;
    text-shadow: 5px 5px 5px #000000;
    background-color: white;
    opacity: 0;
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    transition: opacity .5s linear;
}

#inner:hover{
    opacity: 1;
}

#outer{
    border: 6px solid #dcc5c5;
    border-radius: 20px;
    text-shadow: 5px 5px 5px #000000;
    position: relative;
    display: inline-block; 
    transition: all 0.5s ease-in-out;
    background-color: red;
  height: 200px;
  width: 200px;
}

I've tried various suggestions here and here with no solution.

you are using margin-top:20px – Liaqat Saeed Oct 16 '17 at 18:05 — Liaqat Saeed, Oct 16 '17 at 18:05
looks fine to me? add border-radius to #inner as well? – Dalin Huang Oct 16 '17 at 18:23 — Dalin Huang, Oct 16 '17 at 18:23

score 0 · Answer 1 · answered Oct 16 '17 at 18:06

you are using margin-top:20px; in this element

#inner {
    height: 100px;

    background-color: #42749F;
    width: 200px;

    /* -1px here for to compansate for the outer border of the container */
    -moz-border-radius: 0 0 9px 9px;
}

remove margin and it will fill inside parent element

Working fiddle

score 0 · Answer 2 · answered Oct 16 '17 at 18:18

The problem in that is that the child takes priority, if the parent div says:

text-font: Sans-Serif

but the child says:

text-font: Arial

the elements in the child sector take priority. In other words, the parent is the "Default". The same happens to "rounded corners" and "margin-top". The "margin-top" takes priority.

Just make sure that those two are correct.

score 0 · Answer 3 · answered Oct 16 '17 at 18:39

I guess the border you've set on the inside division is creating problems here. Removing the border makes the child element fully fill the parent.

Is this what you were looking for? You may elaborate more if you want, in comments.

.box {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  transition: all 0.5s ease-in-out;
  background-color: red;
  height: 200px;
  width: 200px;
}

.scratcher{
  height: 100%;
  width: 100%;
  background-color: white;
  opacity: 0;
  transition: opacity .5s linear;
}

.scratcher:hover{
  opacity: 1;
}

<div class="box">
  <div class="scratcher">Scratcher</div>
</div>

That's good, but when I remove the border in JSFiddle and on my desktop environment, I still get a sliver of red on the corners... — Daniel Lee, Oct 16 '17 at 18:44

UncaughtTypeError · Answer 4 · 2017-10-16T19:06:42.227

0

I noticed that if you offset the difference (6px) in border-width of the containing element (.box_1 / #outer), with the border-radius of the nested element (#scratcher / #inner), you will fill up the corner gaps.

Deduct 6px from the border-radius value of the nested element (#scratcher / #inner).

#inner {
  height: 100%;
  width: 100%;
  border-radius: 13px;
  text-shadow: 5px 5px 5px #000000;
  background-color: white;
  opacity: 0;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  transition: opacity .5s linear;
}

#inner:hover {
  opacity: 1;
}

#outer {
  border: 6px solid #dcc5c5;
  border-radius: 20px;
  text-shadow: 5px 5px 5px #000000;
  position: relative;
  display: inline-block;
  transition: all 0.5s ease-in-out;
  background-color: red;
  height: 200px;
  width: 200px;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

edited Oct 16 '17 at 19:06

answered Oct 16 '17 at 18:54

UncaughtTypeError

8,226
4
23
38

When I run this on my desktop, I get a 1 pixel border separating the inner div and the outer. – Daniel Lee Oct 16 '17 at 19:03
Bump that down to `13px` on the `border-radius` style of `#inner`. Updating answer... stand by... – UncaughtTypeError Oct 16 '17 at 19:06
There is no change with a bump down to 13px – Daniel Lee Oct 16 '17 at 19:11
This works on the JSFiddle, but not my desktop which uses Chrome to display... Why... – Daniel Lee Oct 16 '17 at 19:12
Because Computer Science, Daniel ;) Honestly, I can't say. If it works in JSFiddle I don't see why it wouldn't work in Chrome or any other browser. Stranger things have happened though. Do you get the same issue using other browsers (firefox, edge, opera, etc)? What browser are you using to access JSFiddle? – UncaughtTypeError Oct 16 '17 at 19:21
It's a weird error where depending on the zoom of my browser, it adds the 1 px spacing. I zoom once, and the spacing disappears, zoom again and it reappears. I'm content with how it is, but it would be nice to get the issue resolved absolutely. – Daniel Lee Oct 16 '17 at 19:35
That would be an unrelated issue (to the initial issue of the question), but you could try adding `zoom: 1.0;` to the elements in question. Want to know more? **zoom - CSS | MDN:** https://developer.mozilla.org/en-US/docs/Web/CSS/%40viewport/zoom – UncaughtTypeError Oct 16 '17 at 19:40

Child div does not fill the parent div when using rounded corners

4 Answers4