border-image remove the background color and center of each side

Question

I want to remove the background color of border-image and position the border-image to center of each side of my div. Any idea how I can do this?

Here is my JSFiddle.net

HTML:

<div>WELCOME</div>

CSS:

div {
    background-color: #99FF00;
    text-align:center;
    font-family: arial;
    color: #454545;
    font-size: 20px;
    width: 200px;
    height: 100px;
    line-height:100px;
    margin: 50px 50px;
    outline: 4px solid #000000;
    border: 30px solid #FF0000;
    -webkit-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
    -o-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
    border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
}

I want to achieve this:

Any help would be very much appreciated. Thanks!

Answer 1

Here is a working fiddle: http://jsfiddle.net/chajadan/f1pnws6v/8/

The following lines were getting in the way of the border-color change, if you remove them you'll see the border as you wanted:

-webkit-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
-o-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;

Then I refactored the code to display the same images with divs. I used this reference to vertically align the side images: How to vertically align an image inside div

There is quite possible extraneous css and/or elements present. I didn't clean it down.

Answer 2

I've played around a bit and come up with this FIDDLE.

If you look at the border-images definitions, the key is that the images are 'corner' images, and you can just repeat them over the middle section.

So in the fiddle, I just put the green text in the middle and absolutely positioned some ASCII diamonds. - not very elegant.

CSS

.holder {
    outline: 6px solid gray;
    border: 1px solid gray;
    width: 200px;
    height: 100px;
    position: relative;
}
.diamond1 {
    font-size: 40px;
    position: absolute;
    top: -12px;
    left: 50%;
}
.diamond2 {
    font-size: 40px;
    position: absolute;
    bottom: -10px;
    left: 50%;
}
.diamond3 {
    font-size: 40px;
    position: absolute;
    top: 20px;
    left: -1px;
}
.diamond4 {
    font-size: 40px;
    position: absolute;
    top: 20px;
    right: -1px;
}
.textspan {
    display: block;
    border: 1px solid green;
    background-color: green;
    margin: 25px auto;
    color: white;
    height: 48px;
    width: 160px;
    text-align: center;
    line-height: 48px;
}