Cómo utilizar una imagen para un borde en CSS

Question

Quiero establecer el borde de una tabla como "1px negro sólido", excepto en la parte inferior, donde quiero usar una imagen que proporciona un puntero en el vínculo, como una ayuda visual.

Es posible establecer una imagen como el borde inferior cuando los otros bordes son css regulares.

Answer 1

No lo creo. Probablemente sea mejor que agregue un <DIV> debajo de la tabla, asígnele un borde negro, un fondo fijo y algo de relleno fijo o lo que sea (para darle un cierto tamaño).

Answer 2

Puede establecer las fronteras como que, excepto el borde inferior:

border-top:1px solid black; 
border-right:1px solid black; 
border-left:1px solid black; 

Para el borde inferior, se puede establecer la imagen como fondo de una fila tal vez.

Answer 3

No. ¿Por qué no prueba otra fila de la tabla para ese propósito?

Answer 4

trate de poner la mesa en el interior y luego <div class="myTableContainer"></div>:

.myTableContainer{ 
    padding-bottom: 1px; 
    background: url(myBorderImage.png) bottom left; 
} 

Esto debería funcionar bien en todos los navegadores.

Answer 5

Una solución es darle un estilo a su elemento con una imagen de fondo en css y luego especificar un desplazamiento para el fondo en CSS. El fondo puede sobresalir desde más allá del borde del elemento (un elemento div o li, por ejemplo). Esto se puede usar para muchos efectos diferentes, uno es la apariencia de una sombra paralela usando css puro.

Algunos detalles aquí:

http://www.alistapart.com/articles/cssdropshadows/

Answer 6

trate de poner una debajo de la mesa a continuación, establezca su estilo como

.bottomborder { 
    height:1px; 
    background-image:url("yourImage.png"); 
} 

Debería funcionar bien.

Editar: y por supuesto border-top, a la izquierda, el apoyo adecuado para su mesa de un "sólido 1px negro"

Answer 7

CSS3 ha añadido frontera imagen para. Puede encontrar más información en http://www.w3.org/TR/css3-background/#border-images. En este punto (principios de 2012), probablemente no sea seguro de usar debido a la falta de soporte en todas las versiones de IE. Para realizar un seguimiento cuando es seguro de usar, puede visitar http://caniuse.com/#search=border-image. Una forma de simular el estilo de la imagen de borde es usar una imagen de fondo posicionada. Por ejemplo, para simular un borde superior:

div 
{ 
    background-image: url('topBorder.gif'); 
    background-position: top; 
    background-repeat: repeat-x; 
} 

Answer 8

Ahora hay CSS3border-image y una propiedad por ese, pero aún no funciona para todos los navegadores.

Bien, hay un W3Schools link sobre este tema.