Changing the outer opacity without affecting the inner in CSS


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


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


This is work

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

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