Question

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

A JSFiddle is self explaining.

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.

Answer 1

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/