¿Hay alguna manera de usar una imagen diferente para cada lado de una imagen de borde CSS3?

Question

En Firefox y Safari, puedo usar una imagen de la frontera con el siguiente CSS:

-moz-border-image: url(shadow_left.png) 0 7 0 7 round round; 
-webkit-border-image: url(shadow_left.png) 0 7 0 7 round round; 

Sin embargo, no puedo encontrar una manera de utilizar una imagen diferente para izquierda y derecha. ¿Hay alguna manera de hacerlo que sea compatible con los navegadores modernos?

Answer 1

borradores anteriores dijeron it's possible, mediante el uso de:

border-top-image 
border-right-image 
border-bottom-image 
border-left-image 
border-top-left-image 
border-top-right-image 
border-bottom-left-image 
border-bottom-right-image 

Sin embargo, el current candidate recommendation for CSS Backgrounds and Borders (25 de noviembre de 2009) estas propiedades desapareció. Parece que ya no puedes usar diferentes imágenes para cada lado del borde. Como nota personal, no habría utilizado imágenes diferentes para evitar el parpadeo por la misma razón que uno empacaría los estados de los botones (sin presionar, presionar, hover) en un solo archivo de imagen y luego usar css para compensar en el imagen de origen.

EDIT: border-top-image, border-left-image, etc. estuvieron presentes en WD 2002-11-07 pero desaparecieron en WD 2005-02-16.

EDIT2: Puede que le interese el complemento jquery.borderimage.js.

Answer 2

CSS3 permite border-left-image (y arriba, derecha, abajo) Esperaría que las versiones específicas del navegador hicieran lo mismo. Pero no lo probé.

Answer 3

Leyendo the CSS3 spec, no parece haber ninguna mención de usar diferentes bordes para los diferentes bordes. Sin embargo, css3.info menciona algunas propiedades que deberían existir, pero no de acuerdo con la especificación.