How to make the contents of an element with round-cornered border be also round-cornered?

http://jsfiddle.net/XjsWZ/

I'm trying to get the white box itself to have rounded corners in addition to its transparent gray bord开发者_JS百科er using CSS3. Is this possible?

html:

<div class="outer"><div class="inner"></div></div>

css:

.outer{
    width: 300px;
    height: 300px;
    border: solid 10px;
    border-radius: 5px;
    border-color: rgba(0, 0, 0, 0.5);    
}

.inner{
    border-radius 5px;    
}

Bonus question: What's with those black squares in the corners on Chrome?

EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?

http://jsfiddle.net/XjsWZ/3/ maybe?

** edit **

I prefer JamWaffles':

.outer{
    width: 290px;
    height: 290px;
    border: solid 10px;
    border-radius: 15px;
    border-color: rgba(0, 0, 0, 0.5); 
    background-clip:padding-box;
    background-color:white;
    padding: 5px;  
}

Or if you want different looking corners there's a variant of Jedidiah's:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}

.inner{
    border-radius: 5px;
    background-color: white;
    height: 100%;
}

JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.

Example: http://jsfiddle.net/XjsWZ/7/

css:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.inner{
    border-radius: 5px;
    background-color: white;
    display:block;
    width: 100%;
    height: 100%;
}

html:

<div class="outer"><div class="inner"></div></div>

This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.

Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.

In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?

http://jsfiddle.net/XjsWZ/10/

It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:

css:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.inner{
    border-radius: 5px;
    background-color: white;
    display: block;
    width: 280px;
    height: 280px;
    position: relative;
    top: 10px;
    left: 10px;
}

html:

<div class="outer"><div class="inner"></div></div>