Borders with opacity?

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

A JSFiddle is self explaining.

There are dar开发者_开发百科k corners in the border, and the background of the element is visible behind it instead of the other elements behind it.

Thank You.

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/

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/