CSS3 Opacity not working

HTML & CSS
1

Hi,

I’m trying to add opacity on a border as it should degrade nicely with “old” browsers but it doesn’t work (FF 3.6, Chrome 5)
Here is the code:

	
border: 10px solid #f2f7fc;
border: 10px rgba(255, 255, 255, 0.35);

is there an error?

Thanks!

2

I’m still having problems with opacity applied on borders:

border: 10px solid #f2f7fc;
border: 10px solid rgba(255, 255, 255, 0.35);

is ok with Firefox/Opera but not with Safari/Chrome where the corners appear
and I don’t know if it’s a bug with these browsers or a normal behaviour. Any idea to fix this?

3

Thanks kohoutek, that’s ok now :slight_smile:

4

You should have said you use images. :slight_smile:

If you try the code I gave you for the borders, it works as intended.

You may want to use the opacity property instead. That property takes all elements, e.g.


#transparency-container {
    opacity:0.2;
    border: 10px solid #f2f7fc;
}



<div id="transparency-container">
    <p>some text</p>
    <img src="myimage" alt="content description">
</div>
5

Hi kohoutek,

I tried your solution but I still can’t see the image background behind the border, I have the feeling that opacity only works with colors, not images :blush:

6

You forgot a value. This works:

        border: 10px solid #f2f7fc;
border: 10px solid rgba(255, 255, 255, 0.35);