"non-opacity" border for "opacity" element

Question

Given this html

    <div id="my_div">   
    </div>

css

         #my_div {
            width: 100px;
            height: 100px; 
            background-color: #0f0;
            opacity: 0.4; 
            border: 3px solid #ff0000;
         }

I want that own div tag will opacity, but dont need border also.

css can make "non-opacity" border for "opacity" element?

Answer 1

There isn't a non-opacity attribute but what you can do is set the background colour of that div with RGBA. This allows you to specify an opacity essentially, but just for the background (so it won't affect the border)

background: rgba(0, 255, 0, 0.4);

This will achieve what you want, a red border with that transparent looking background. Demo HERE. This won't however, make inner content, such as images or text transparent. Though you can set the opacity on those elements freely without worrying about the border of the parent.

You can find a good article that details the difference between opacity and RGBA here and here

It should be noted that, as expected, IE8 and below do not support RGBA, though it can be "hacked" with CSS3 PIE.

Answer 2

Use CSS3 rgba, It's CSS so cross-browser will be an issue here, but for IE you can use CSS3 Pie

#my_div {
     width: 100px;
     height: 100px; 
     background-color: rgba(R, G, B, A);
     border: 3px solid #ff0000;
}

Demo

Moreover using rgba() for opaque container won't make your text opaque as using opacity: .7 used to do...