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.

Answer 1

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

Answer 2

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.

Answer 3

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> 

Answer 4

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>