Imágenes de borde

Internet Explorer 11 permite definir imágenes con bordes personalizados con la propiedad border-image de la especificación Módulo de fondos y bordes de CSS, nivel 3 del W3C. Con la propiedad border-image, puedes especificar tus propias imágenes para los bordes como alternativa de los estilos tradicionales.

La propiedad border-image

La propiedad border-image consiste en una propiedad abreviada que especifica cómo usar una imagen en lugar de estilos de borde. La propiedad abreviada border-image consta de cinco propiedades independientes que puedes usar de forma separada para especificar cada uno de los componentes de una imagen de borde CSS, si bien en muchas ocasiones conviene más definirlas en un sitio mediante esta propiedad abreviada. La sintaxis de la propiedad border-image es la siguiente:

border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width> ? /<border-image-outset> ] ? || <border-image-repeat>

PropiedadDescripción

border-image-source

Especifica la ubicación de la imagen que se va a usar para el borde.

border-image-slice

Mediante cuatro desplazamientos hacia adentro, esta propiedad divide la imagen de borde especificada en una cuadrícula de tres por tres: cuatro esquinas, cuatro bordes y un centro.

border-image-width

Especifica el ancho/alto de la imagen de borde definiendo desplazamientos hacia adentro desde los bordes del área de la imagen de borde.

border-image-outset

Especifica la cantidad de espacio por la que el área de la imagen de borde se extiende más allá del cuadro de borde.

border-image-repeat

Especifica si los lados de la imagen de borde tienen la escala ajustada o se presentan como mosaico.

 

Definir, dividir y repetir la imagen

Al usar border-image, primero tienes que indicar los valores de estilo de borde. A continuación te mostramos un elemento div con un borde de 15 píxeles de ancho en negro sólido. El área negra es el cuadro del borde o área de borde, que es donde la imagen de borde va a situarse de forma predeterminada. Esto se puede ajustar si especificas valores en border-image-width y border-image-outset.

Elemento HTML con un borde negro

La siguiente imagen (con fondo transparente) es una imagen de 81x81 píxeles utilizada para la imagen de borde en el siguiente ejemplo.

Imagen con círculos verdes y azules

Tras aplicar estilo al elemento con las propiedades border-image, los estilos de borde originales se reemplazan y el la imagen de borde dividida rellenará el cuadro de borde. Los siguientes estilos sirven para definir estilos de imagen de borde en un elemento HTML y logran la apariencia de la siguiente imagen.


#box { 
   border: solid 15px;
   border-image: url("border.png") 27 27 round stretch;
}

Elemento HTML con un borde cuyo estilo se ha definido mediante la propiedad border-image

En el CSS anterior, los números tras el código fuente de la imagen definen las distancias de división de la imagen (border-image-slice). Las distancias de división se establecen en 27 píxeles con respecto a las partes superior, inferior, izquierda y derecha de la imagen. Estas distancias de división pueden apreciarse en rojo en la siguiente ilustración.

Imagen en la que se aprecian las distancias de división de la imagen a 27 píxeles.

"Round" y "stretch" hacen referencia al modo en que las imágenes van a rellenar el área entre el borde (border-image-repeat). El primer valor (round) se aplica a los lados horizontales. La imagen se muestra en mosaico, o repetida, hasta que rellena el área entre los bordes. Si el área no se puede rellenar con un número entero de mosaicos, la escala de la imagen se reajusta para que así sea. El segundo valor (stretch) se aplica a los lados verticales. Aquí, la imagen se estira para rellenar el área entre los bordes. Stretch es el valor predeterminado.

En el ejemplo de abajo se vuelve a usar la propiedad abreviada border-image para manipular la misma imagen anterior y conseguir un borde con un aspecto muy diferente.

Elemento HTML con un borde cuyo estilo se ha definido mediante la propiedad border-image


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 round; 
}


En este ejemplo, las distancias de división están establecidas en 20 píxeles con respecto a las partes superior e inferior de la imagen, y en 15 píxeles con respecto a izquierda y derecha. En este ejemplo, se usa round en lugar de la propiedad predeterminada border-image-repeat.

Definir valores de ancho y altorrelieve

También puedes especificar el ancho y el alto de la imagen de borde si defines desplazamientos hacia adentro desde los bordes del área de la imagen de borde utilizando para ello la propiedad border-image-width. Border-image-width tiene un valor predeterminado de uno; es decir, border-image-width es un múltiplo del valor calculado de border-width, o el ancho del cuadro de borde. En el ejemplo anterior se muestra un elemento div con un border-image-width de 1, lo que confiere a la imagen de borde un ancho de 15px (1 x el valor de border-width de 15px). Con el mismo CSS de antes, si estableces border-image-width en 20px, la imagen tendrá la siguiente apariencia. En este ejemplo, defines un desplazamiento hacia adentro de 20px con respecto a los bordes del área de la imagen de borde.

Elemento div con la propiedad border-image-width definida

El CSS del elemento div anterior tiene el siguiente aspecto:


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 /20px round;
}

La imagen se puede seguir manipulando; así, puedes usar la propiedad border-image-outset para especificar la cantidad de espacio por la que el área de la imagen de borde se extiende más allá del cuadro de borde. Si estableces los valores de border-image-outset en 0px desde arriba, 30px desde la derecha, 30px desde abajo y 10px desde la izquierda, obtendrás la siguiente imagen.

Elemento div con valores de la propiedad border-image-outset definidos

El CSS del elemento div anterior tiene el siguiente aspecto:


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 /20px /0px 30px 30px 0px round;
}

Referencia de API

borderImage

Especificación

Módulo de fondos y bordes de CSS, nivel 3: sección 6

 

 

Mostrar:
© 2014 Microsoft