Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet:
Code
<html>
<head>
<style>
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
}
#inner {
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner">text</div>
</div>
</body>
</html>
Effect
alt text http://img256.imageshack.us/img256/2108/testew.png
To avoid this problem, one solution is to define -moz-border-radius for each child of outter. Are there any other alternative methods that I might be overlooking?
Edit
A more complex scenario where multiple inner divs have different background-color properties:
<div id="outter">
<div id="inner1" style="background: blue">text</div>
<div id="inner2" style="background: gray">text</div>
...
<div id="innerN" style="background: yellow">text</div>
</div>