CSS Wrong Appearance of Border-Radius on a Nested Div

CSS wrong appearance of border-radius on a nested div

Part 1 of the problem: (Child becoming a round in original demo)

The problem is because of the box-sizing: border-box. When this is set, the defined height, width of the box (250 x 250px) is considered as inclusive of the width of the border and the padding. So, the element's actual content area is only 200px x 200px (excluding 50px for horizontal & vertical borders).

Thus the child div will only have a size of 200px x 200px (this can be verified in Dev tools). When a border-radius of 100px is inherited from parent, it becomes a round as that is half of its dimensions.

So, the border-radius cannot be inherited for the child if the shape has to be maintained. It should be set as 80px (approximate). (Initially I had mentioned that a value of 76px was working better and that I was trying to find out the reason for it - please refer to Part 2 for the reason.)

*,

*:after,

*:before {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

<div id="wrapper-target"       

     style="position:absolute;

            top:100px;left:100px;

            width:250px;height:250px;

            border-radius:100px;

            border:25px solid red;">

  <div id="target" 

       style="position:relative;

              width:100%;height:100%;

              background-color:plum;

              border-radius:76px;">

  </div>

</div>

Nested Border Radius Problem

First of all you have some typo in your code
border-radius not border radius
Then, if you apply border-radius for all corners for an element that have an height less than border-radius itself then browser just apply the rounded corner on half of the height of the element. For example if you have a div that have 10ox height and if you apply 5px radius for every corner then browser just applies 5px of your 10px border-radius to each corner. It doesn't mean you got 5px border-radius it means just 5 top pixels will affect.

In your sample the div doesn't have enough height to accept 20px border-radius.
If you apply a height more that 40px then you can have perfect border-radius effect.

Look at the fiddle

Border-radius doesn't affect inner elements

Here is the fiddle - http://jsfiddle.net/ashwyn/V98h7/2/

Add -

#outer {
   overflow: hidden;
}

and it will work.

More information on the overflow property can be found on MDN.

image with border radius does not fill the div

I prefer to apply overflow: hidden to the container, unless some child content needs to be visible outside of the container. When used with a border radius it masks off the parts of the child that overflow:

.container {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  border: 1px solid grey;
  overflow: hidden;
  
/*  just to make it bigger  */
  transform: scale(15);
  transform-origin: top left;
}

.img {
  height: 32px;
  width: 32px;
}

<div class="container">
    <img
        alt="thumb"
        class="img"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/300px-Gull_portrait_ca_usa.jpg"
    />
</div>

Why child element corners with border-radius: inherit; doesn't align with parent's

Simply setting your childs border to a lower px value will solve this - or as I've done below, you can remove border-radius: inherit.

Your issue was you applied a 20px border-radius on both elements, and as the child element was smaller than the parent, it means the border-radius appears more harsh, as the <p> tag was smaller - causing them to both be unaligned.

Updated CodePen

MDN - Border Radius

EDIT:

If you wanted to negate the overflow property - the only other way I can think of if you needed to keep your parent properties as they are would be to set the border-radius of the child to the same scale of radius as the parent - in this case about 12px as seen below.

* {

  box-sizing: border-box;

}

.parent {

  border: 7px solid #888;

  border-radius: 20px;

  background: lime;

}

.child-text {

  border-radius: 12px;

  background: linear-gradient(90deg, tomato, purple);

  margin: 0;

  padding: 10px;

  color: #fff;

}

<div class="parent">

  <p class="child-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, distinctio? Pariatur voluptas officia placeat dolores, quam soluta laborum commodi voluptates cum quos illum labore eum nihil, perspiciatis nobis et reiciendis?</p>

</div>

border-radius not working

To whomever may have this issue. My problem was border-collapse. It was set to:

border-collapse: collapse;

I set it to:

border-collapse: separate; 

and it fixed the issue.

---

Related Topics