border-color: rgba() borders overlap at the corners giving a darker color than intended

Problem

Using the following code:

element{
width:300px;
border:9px solid;
border-color:rgb(0,0,0);
border-color:rgba(0,0,0, 0.7);
}

I end up with corners that are darker due to the overlay of the two borders… the only way I have found around this is to add a border-radius equal to the width of the border. Are there any other work arounds?

I have only tested in chrome at the moment, I don’t have my other browsers available right now.

Problem courtesy of: Chris Sobolewski

Solution

It’s not very elegant, but you could make a wrapping <div> with a solid border and an opacity value: http://jsfiddle.net/4gutj/24/

HTML:

<div class="opacity-wrapper">
<div class="transparent-border">Foo</div>
</div>

CSS:

.transparent-border {
width:300px;
font-size: 40px;
padding: 10px;

text-align: center;

border:30px solid;
border-color:rgb(0,0,0);
border-color:rgba(0,0,0, 0.7);

margin-bottom: 10px;
}

.opacity-wrapper {
background-color: rgb(0, 0, 0);
opacity: 0.7;

padding: 30px;
width:320px;
}

.opacity-wrapper div {
padding: 10px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);

font-size: 40px;
text-align: center;
}

Solution courtesy of: Blender

View additional discussion.