Forcing child to obey parent’s curved borders in CSS

by

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/

More Related Contents:

  1. What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS
  2. Should I use max-device-width or max-width?
  3. CSS Font Border?
  4. CSS hexadecimal RGBA?
  5. How to overwrite styling in Twitter Bootstrap
  6. How to make child element higher z-index than parent? [duplicate]
  7. How can I transition width of content with width: auto?
  8. How do min-content and max-content work?
  9. CSS @font-face absolute URL from external domain: fonts not loading in firefox
  10. CSS – center two images in css side by side
  11. Can I style the resize grabber of textarea?
  12. Bootstrap 3 – desktop view on a mobile device
  13. Text: right to left (CSS)
  14. Proper way to apply CSS to HTML5 custom elements
  15. CSS transition with visibility not working
  16. Fill background color left to right CSS
  17. Fallback fonts on special characters
  18. Nested rows with bootstrap grid system?
  19. How do I line up 3 divs on the same row?
  20. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  21. Filling water animation
  22. How to ignore parent element’s overflow:hidden in css
  23. Div side by side without float
  24. CSS specificity or inheritance?
  25. Bootstrap – Removing padding or margin when screen size is smaller
  26. CSS transition between left -> right and top -> bottom positions
  27. Firefox blurs an image when scaled through external CSS or inline style.
  28. does a background-attachment of fixed work in iOS5?
  29. How to override stylesheets of PrimeFaces? [duplicate]
  30. How is padding-top as a percentage related to the parent’s width?

Leave a Comment