Question:
How to prevent a child div, "#inner," from extending beyond the curved borders of its parent div, "#outer," despite attempts to restrain it?
Explanation:
According to CSS specifications, borders and background effects clip to the curve, while replaced elements always trim their content to the curve. However, content can still overlap.
Solution:
Specific Border Curves on #inner: Alternatively, define specific curves for each border in Firefox 3.6 and lower.
#inner { -moz-border-radius: 10px 10px 0 0; }
Overflow: hidden Specific Curves on #inner: For optimal compatibility, combine both approaches for a clean solution.
#outer { overflow: hidden; } #inner { -moz-border-radius: 10px 10px 0 0; }
Example:
<div id="outer" style="background-color: white; overflow: hidden; border-radius: 10px;"> <div id="inner" style="background-color: green; -moz-border-radius: 10px 10px 0 0;"> </div> </div>
Result:
The above is the detailed content of How to Confine Child Content Within Curved Parent Borders in CSS?. For more information, please follow other related articles on the PHP Chinese website!