How to get a semi-transparent border-image to show the border-color behind it?

I have a wrapper div with a 20px right border. I set a border-color and then a border-image with a semi-transparent png.

I did that to be able to change the color below via JavaScript while keeping the texture of the png. But the "background" border color become white as soon as I use the border-image rule, or disappear at all.

The HTML is simply:

<div class="wrapper clearfix">
...
</div>

And CSS:

.wrapper {
    float: left; 
    min-height: 100%; 
    border-right: 20px solid lime url('../img/elastic.png'); 
    position: relative;
}

Solution

Sorry, but the border-image isn't meant to be used in conjunction with border-color.

According to the W3C:

The 'border-image' property specifies an image to use instead of the border styles given by the 'border-style' properties.

As you can see with this JSFiddle, any border style are ignored. Only the border-width have some effect.

I suggest you create specific images for each border you want.