Changing the outer opacity without affecting the inner in CSS

Problem

The effect I want to create is a transparent border effect. I have created the box using two div tags, one for the inner and one for the outer. `

enter image description here

The HTML I used for this is:

<div class="main_box_outer">
    <div class="main_box_inner">
    </div><!--/ inner-->
</div><!--/ outer-->`

The CSS I used to create this is:

.main_box_inner {
width: 30em;
height: 20em;
background: white;
border-radius: 1em; }


.main_box_outer {
display: inline-block;
background: black;
padding: 1em;
border-radius: 2em; 
opacity:1; }

However, when I change the opacity of the outer box (the border) in CSS, it also changes the inner box's opacity because the inner box div is contained inside the outer box div. How can I change the outer opacity without affecting the opacity of the inner box?

Problem courtesy of: Ecliptic

Solution

Use rgba for your background color:

{ background: rgba(0,0,0,.5); }

View on JSFiddle

rgba is a way to define a color including the alpha channel (its opacity). The alpha channel goes from 0 to 1, just like opacity. It can be used on any property that can have a color set: color, background, border, and so on.

Note that earlier versions of IE don't support rgba colors; they just place the alpha channel at 1.

Solution courtesy of: jmeas

Discussion

This is work

.main_box_outer 
{
    display: inline-block;
    background: rgba(0,0,0,.5);
    padding: 1em;
    border-radius: 2em; 
    opacity:1; 
}
Discussion courtesy of: Kishore Kumar

This recipe can be found in it's original form on Stack Over Flow.