Have Border-Radius Cover Inner Divs

Border-radius hidden by inner div

Use overflow: hidden on your #box element:

#box {
    height: 250px;
    width: 250px;
    border-radius: 10px;
    background: #bbb;
    overflow: hidden
}

See the updated Fiddle here: http://jsfiddle.net/AAUbA/2/

As an aside: it's worth considering adding in vendor-prefixes to ensure better cross-browser compatibility.

This is a good write-up on how to use the property.
You can use this tool to auto-generate the CSS you need.

Have border-radius cover inner divs

I found that WebKit would crop everything if I put overflow: hidden on the element, but Gecko wouldn't (see my blog post for code and screenshots). The best I could do in Gecko was either put a border radius in the inner div too, or add a margin/padding to the wrapper div so that the inner divs sat below the corners.

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.

Element with border-radius inside element with border-radius is not consistent

You can use inset box-shadow instead of border.

.parent {
  /*border: 3px solid tomato;*/
  background-color: white;
  height: 200px;
  border-radius: 30px;
  box-shadow: inset 0px 0px 0 3px tomato;
}

.child {
  border: 3px solid tomato;
  padding: 10px;
  border-bottom: none;
  background-color: tomato;
  height: 100px;
  border-radius: 30px 30px 0 0;
  box-sizing: border-box;
}

<div class="parent">
  <div class="child">
  </div>
</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>

---

Related Topics