222

I have a div inside of another div. #outer and #inner. #outer has curved borders and a white background. #inner has no curved borders and a green background. #inner extends beyond the curved borders of #outer. Is there anyway to stop this?

#outer {
  display: block;
  float: right;
  margin: 0;
  width: 200px;
  background-color: white;
  overflow: hidden;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#inner {
  background-color: #209400;
  height: 10px;
  border-top: none;
}
<div id="outer">
  <div id="inner"></div>
  <!-- other stuff needs a white background -->
  <!-- bottom corners needs a white background -->
</div>

No matter how I try it still overlaps. How can I make #inner obey and fill to #outer's borders?

edit

The following hack served the purpose for now. But the question stands (maybe to the CSS3 and webbrowser writers): Why don't child elements obey their parent's curved borders and is there anyway to force them to?

The hack to get around this for my needs for now, you can assign curves to individual borders. So for my purposes, I just assigned a curve to the top two of the inner element.

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}
5
  • Have you tried to set exactly the same border radius to the internal element? Sep 15, 2010 at 6:20
  • 1
    But I want the border radius of the internal element to be straight on the bottom. Is it possible to set a border radius just for a certain corner? Sep 15, 2010 at 7:03
  • For sure. You can even assign them like border-radius: TL TR BL BR. Sep 15, 2010 at 7:17
  • 54
    I read this as "Forcing child to obey parent's orders". :) Sep 16, 2010 at 5:40
  • With the exception of Safari, -moz-border-radius and border-radius can be used as a shorthand with four values: 10px 10px 0 0. For Safari however you need to set them individually.
    – Yi Jiang
    Sep 16, 2010 at 5:45

5 Answers 5

336

According to the specs:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

http://www.w3.org/TR/css3-background/#the-border-radius

This means that an overflow: hidden on #outer should work. However, this won't work for Firefox 3.6 and below. This is fixed in Firefox 4:

Rounded corners now clip content and images (if overflow: visible is not set).

https://developer.mozilla.org/en/CSS/-moz-border-radius

So you'll still need the fix, just shorten it to:

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}

See it working here: http://jsfiddle.net/VaTAZ/3/

8
  • 2
    Bingo, I was testing with Firefox 3.6. So this explains it. Sep 18, 2010 at 1:17
  • 2
    Anyone coming in this late in the game, overflow: hidden; is working on current versions of FF. Make sure you test back as far as your requirements need.
    – BillyNair
    Feb 22, 2016 at 20:40
  • Just wanna note that the fiddle has margin, so the real effect of overflow hidden is hidden Dec 3, 2017 at 17:35
  • 3
    What if we don't want the overflow content to be hidden? A hidden overflow will cut off things like tooltip popups and window menus that appear inside.
    – mae
    Jan 10, 2019 at 1:13
  • 2
    Just add overflow: hidden; and border-radius to outer DIV
    – Nader
    Apr 10, 2019 at 8:27
3

You can simply use

border-radius: inherit;

to follow the parent

.parent {
 width: 100px;
 height:100px;
 border:1px solid green;
 border-radius: 16px 16px 0 0;
 padding: 10px;
}
.child {
  width:100px;
  height: 100px;
  border: 1px solid red;
  background: blue;
  border-radius: inherit;
}
<div class="parent">
  <div class="child">

</div>
</div>

1
  • in case for some reason you can't use 'overflow:hidden' on the parent, this is the way to go
    – schellmax
    Jul 12 at 14:39
2

What would be wrong with this?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}
2
  • I want the bottom to be sharp cornered. This would take two inner divs, one given a negative margin to overlap the other. Sep 15, 2010 at 7:02
  • Hmm... turns out you can set individual corners. So I just set the top two. Sep 15, 2010 at 7:08
1

If you want sharp edges on the bottom: Use these :

border-top-left-radius: 10px;
border-top-right-radius: 10px; 

-moz-border-radius-topleft
-moz-border-radius-topright
0

have you tried making the position:relative for the inner div ???

that is:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}
1
  • Using position: relative doesn't work :/ Jan 5, 2021 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.