Content boundary with rounded corners

Posted by Rui Carneiro on Stack Overflow See other posts from Stack Overflow or by Rui Carneiro
Published on 2010-04-12T11:13:25Z Indexed on 2010/04/12 11:23 UTC
Read the original article Hit count: 203

Filed under:
|
|
|

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

alt text

I can avoid this problem by defining -moz-border-radius for each outter's child. There is any other way I am missing?

© Stack Overflow or respective owner

Related posts about firefox

Related posts about rounded-corners