How do I set a border-image?

I have this HTML code in which a QR-code is generated via AJAX :

<div class="qr-border">
    <p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>

and I would like to set a border image around the QR-code. I have this image :

and a right corner image :

So I tried this in the CSS :

div.qr-border p.ajax_qrcode {

  开发者_运维问答  text-align: center;
    padding-bottom: 1.0em;
    float: center;
    border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
    border-bottom-right-image: url('../img/qr-code-border/corner.png');
}

but nothing works... Do someone has any suggestion ?

thank you for your help !

I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.

This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:

The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.

I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.

border-image is a very new property in CSS3, and as far as i know, no browser supports it natively.

However, you can probably get it to work in Chrome and Safari by using the proprietary -webkit-border-image property instead.

Edit: try -moz-border-image for firefox as well.

Edit again: Your css selector is wrong, there's your problem. It should look like this:

div.qr-border p.ajax_qrcode

You treated the qr-border class as an ID.

If you just want a straight black border, why not just place the image in a slightly larger box (div) and make the background color black? The margin between the outside of the box and the QR-image should be black, and should ultimately provide the same effect right? Unless QR codes work differently with transparency...