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

You can try placing a div inside another div. The inner div contains the green-colored background. You can also use table

Answer 3

Instead of having the images as border-images, why not have them background-images on some divs that are absolutely positioned?

Below is the CSS explaining the divs with background images of diamonds that are absolutely positioned.

div.greenBox {


background-color: #fff;
  color: #454545;
  font-family: arial;
  font-size: 20px;
  height: 160px;
  line-height: 100px;
  margin: 50px;
  outline: 4px solid #000000;
  position: relative;
  text-align: center;
  width: 280px;
}

div.whiteBox {
  background-color: #99ff00;
  display: block;
  height: 90px;
  position: absolute;
  right: 38px;
  top: 30px;
  width: 200px;
}
div.diamond1, div.diamond2, div.diamond3, div.diamond4 {
     background:url('http://i58.tinypic.com/2chuwrd_th.png') no-repeat;
    display:block;
    width:30px;
    height:30px;
}

.diamond1 {
  position: absolute;
  right: 46%;
  top: 0;
}

.diamond2 {
  position: absolute;
  top: 40%;
}

.diamond3 {
  bottom: 0;
  position: absolute;
  right: 46%;
}

.diamond4 {
  position: absolute;
  right: 0;
  top: 44%;
}

and here is the html markup

<div class="greenBox">
    <div class="diamond1"></div><div class="diamond2"></div>
    <div class="whiteBox">
    WELCOME
    </div>
    <div class="diamond3"></div><div class="diamond4"></div>
</div>

Answer 4

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;
}