"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?

I'm not completely sure what your asking (language barrier) but the border's opacity will be the same as the element's opacity. — George, Nov 27 '12 at 14:21
No, but you could make a div for the border around the transparent div. — looper, Nov 27 '12 at 14:21
possible duplicate of [CSS3 Border Opacity?](http://stackoverflow.com/questions/4062001/css3-border-opacity) — Peter O., Nov 27 '12 at 15:37

Andy · Accepted Answer · 2012-11-27T14:29:12.303

7

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.

edited Nov 27 '12 at 14:29

answered Nov 27 '12 at 14:23

Andy

14,427
3
52
76

4

Actually alien was first to answer but you got a cookie ;) – Hello World Nov 27 '12 at 14:36
Yes, alien was faster, but Andy give slightly more completely answer... and I via coin decided and accept Andy's answer =) Thanks everybody. – Oto Shavadze Nov 27 '12 at 14:44

Mr. Alien · Answer 2 · 2012-11-27T14:41:56.583

5

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...

edited Nov 27 '12 at 14:41

answered Nov 27 '12 at 14:22

Mr. Alien

153,751
34
298
278

1

@F4r-20 It's a good property, not supported by IE as usual but you can use PIE – Mr. Alien Nov 27 '12 at 14:25
@F4r-20 yup, you got it right, it's alpha, also there's a new 1, `HSLa` – Mr. Alien Nov 27 '12 at 14:28

score 2 · Answer 3 · edited May 23 '17 at 12:04

2

See the accepted answer to this question: https://stackoverflow.com/a/4062032/1068266

It states that you can use the RGBA format for the border color, and by setting the "A" value you can set the opacity of the border. As stated in the comments however, the opacity CSS property sets the opacity for the entire object, including the border.

edited May 23 '17 at 12:04

Community

1
1

answered Nov 27 '12 at 14:24

Levi Botelho

24,626
5
61
96

score 2 · Answer 4 · answered Nov 27 '12 at 14:27

Unfortunately, when you apply opacity to an element, it is also applied to any margin, padding or border applied to the element.

The best solution would be to use rgba (as previously posted) and have a 1x1 opaque png as a fallback for legacy browsers (if you support them) and use it as the background image for the element.

One disadvantage to using the opacity property is if your #my_div contains any content (text or images), the content itself will also have that opacity and would likely result in unwanted styling.

Viktor S. · Answer 5 · 2012-11-27T14:30:40.480

~~I'm afraid the only way will be to wrap your div with another div which will have border:~~ One of the ways would be like this (keeping opacity of all inner elements):

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

CSS:

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

Or like others told: rgba for background color, but all inner content will stay non transparent in that case

"non-opacity" border for "opacity" element

5 Answers5