Borders with opacity?

Question

How would you do borders with opacity in CSS? RGBA colors aren't working for me...

There are dark corners in the border, and the background of the element is visible behind it instead of the other elements behind it.

Thank You.

thirtydot · Accepted Answer · 2011-02-16T09:31:31.163

4

There might be a better way, but this works:

Live Demo

Basically, just use a wrapper div with the rgba set as a background.

HTML:

<div id="boxOuter">
    <div id="box">THANK YOU!</div>
</div>

CSS:

#box{
    background-color:#ccc;font-weight:bold;
    text-align:center;
    line-height:100px;
    height:100px;
    vertical-align:middle;
    font-size:20px;
}
#boxOuter {
    background: rgba(0,0,0,0.5); width:300px; padding: 10px;
    margin-left:25px;
}

Read the comments to this answer to see how to make this method (rgba) work with older browsers.

A way to do it without using a wrapper:

Use outline instead of border, it looks acceptable:

outline: 10px solid rgba(0,0,0,0.5)

Live Demo (it's your exact code, with the one word changed)

(I'm not considering IE here in the slightest)

Check out this article:

http://css-tricks.com/transparent-borders-with-background-clip/

edited Feb 16 '11 at 09:31

answered Feb 16 '11 at 01:10

thirtydot

224,678
48
389
349

Now to see if there's a way to do it without a wrapper `div`.. :) – thirtydot Feb 16 '11 at 01:12
That works awesomely, thanks! I don't think there is a "no-wrapper" way, but go ahead and try! – JCOC611 Feb 16 '11 at 01:12
A good point about using the wrapper `div` method is that you can make it work in older browsers. See [a previous answer](http://stackoverflow.com/questions/4792090/cross-browser-rgba-background/4792173#4792173) of mine for cross browser rgba backgrounds. – thirtydot Feb 16 '11 at 01:22
1

Chris Coyer put out a great [article](http://css-tricks.com/transparent-borders-with-background-clip/) on that. I recommend you check it out. – Connor Feb 16 '11 at 06:28
@Connor Montgomery: Thanks, that Coyier article was a good read. I was very glad to see `If you'd more complete browser compatibility, you can always go with the double-div method.` - it means that my answer thrown together in a few minutes is still applicable advice. I'm putting a link to that article in my answer. – thirtydot Feb 16 '11 at 09:28

score 1 · Answer 2 · answered Feb 16 '11 at 01:17

I think the 1st answer is the best though you can use images in borders now, try using a png image with transparency (via photoshop) use the border-image property, there's so many ways to use it you may find another style you prefer in the research.

http://www.css3.info/preview/border-image/

Borders with opacity?

2 Answers2