CODEWITHSUNDEEP
htmlcss
Oto Shavadze
Oto Shavadze

Reputation: 42773

"non-opacity" border for "opacity" element

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?

Upvotes: 7

Views: 3573

Answers (5)

Mr. Alien
Mr. Alien

Reputation: 157344

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

Upvotes: 5

Viktor S.
Viktor S.

Reputation: 12815

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

Upvotes: 1

Andy
Andy

Reputation: 14575

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.

Upvotes: 7

chaseadamsio
chaseadamsio

Reputation: 894

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.

Upvotes: 2

Levi Botelho
Levi Botelho

Reputation: 25214

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.

Upvotes: 2

Related Questions