Content boundary with rounded corners
- by Rui Carneiro
I am using CSS rounded corners for firefox and I have the following problem with content boundaries:
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
I can avoid this problem by defining -moz-border-radius for each outter's child. There is any other way I am missing?
