Forcing child to obey parent's curved borders in CSS

0 votes
asked Sep 15, 2010 by daniel-bingham

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>


    

4 Answers

0 votes
answered Sep 15, 2010 by jarrett-widman

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; 
}
0 votes
answered Sep 15, 2010 by naveed-butt

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; 
}
0 votes
answered Sep 15, 2010 by tdtje

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 votes
answered Sep 16, 2010 by yi-jiang

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/

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...