Question

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 !

Answer 1

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.