带边框图像的虚线边框

Question

I have three overlaying layer 2 with background image and 11 or the content.

In the content i placed a input button tag with dashed boarder.

what i was trying to achieve is to get the same background layer image from layer 1 only on the dashes.

Obvious background:transparent isn't working so for second choice i used the input boarder and tried to mock this behavior by setting boarder-image to the background image from layer 1.

.button {
font-family:verdana, sans-serif;
font-size: 20px;
font-weight: bold;
background: transparent;
border-width:5px;
border-style:dashed;
border-color: black; }

So all dashes around the submit button should have the same background like the first layer on the left

I changed it to:

.button {
font-family:verdana, sans-serif;
font-size: 20px;
font-weight: bold;
background: transparent;
border-width:5px;
border-style:dashed;
border-color: black;
border-image: url(/img/bg1.jpg); }

i don't have any idea how to achieve the dashed look with boarder-image

with: border-image: url(/img/bg1.jpg) 30 30 round;

http://jsfiddle.net/6vKdh/3/

Answer 1

CSS border-image Syntax is like this:

border-image: source slice width outset repeat|initial|inherit;

So you are missing something there.

try replace your border-image

border-image: url(/img/bg1.jpg);

for this example:

border-image: url(/img/bg1.jpg) 30 30 round;

for more Documentation look at this : CSS3 Border-Image