¿Aburrido de las opciones de bordes ofrecida por CSS2? No te gustan esos estilos de lineas para los bordes y quieres algo más personal o más divertido, pues puedes personalizar las lenias que se usan para los bordes. Se basa en usar una imagen patrón para dibujar los bordes de los elementos que quieras. Estos patrones se extraen de una imagen..
Un ejemplo es éste código
#imgborde {
width: 300px;
height: 200px;
padding: 10px;
border-width: 10px;
border-color: blue;
border-style: solid;
border-image: url(borde1.gif) 25% stretch stretch;
}
borde1.gif es la imagen que se usa para dibujar el borde del contenedor, en este caso un bloque div como el siguiente:
Si estás en un explorador no compatible se verá el borde normal con el color puesto en border-color, si le pones transparent no se vería ningún borde.
Como ves basta con darle la dirección de una imagen en el atributo url. Esta imagen conendrá cuatro lados, es decir es un marco y esos lados se usarán como partida. Para usar un borde personalizado siempre se debe definir el borde sin imagen, al menos border-style
Estos son las propiedades usadas al usar una imagen como patrón para crear los bordes:
| Propiedad | Uso | Valores |
|---|---|---|
| border-image | Abreviatura para todas las propiedades border-image-* | Todos separados por espacio |
| border-image-source | Url de la imagen usada como patrón del borde | Un url |
| border-image-slice | Como dividir la imagen | numero, %, fill |
| border-image-width | Espesor del borde | Numero que multiplica a border-with Porcentaje del ancho de la imagen Auto: calculado |
| border-image-outset | Distancia entre el contenido del elemento y el borde | Número: multiplica al border-width Valor: desplazamiento absoluto |
| border-image-repeat | Como repetir el patrón de imagen | stretch, repeat, round |
Por último los lados horizontal y vertical puede simpemente usrse ajustando el tamaño de cada lado(stretch) para formar el cuadro compelto, repitiendo cada lado como un tile (repeat) o repitiendo para ajustar los laterales y los bordes superior e inferior (round) y formar el cuadro completo.
Esta imagen tiene los patrones para formar cualquier caja con bordes formados por imágenes. Esta imagen se considera dividida en nueve zonas: las cuatro esquinas, los cuatro lados y el centro. En la definición de la regla se especifica como dimensionar esas regiones, y como han de reptirse para formar el borde.
La propiedad border-image-width nos da el grosor del patrón extraído de la imagen, puede darse como un múltiplo al ancho del borde especificado en border-width o como un porcentaje del ancho de la imagen original.
La propiedad border-image-outset indica el espacio entre el borde normal y el ´de imagen. Puede darse como un múltiplo del ancho del borde o como un valor absoluto con sus unidades CSS.
Y recuerda para que este borde se muestre es necesario definir al menos el border-style correspondoiente a un borde normal.
Propiedad slice
Los atributos que se usan son la url (dirección) de la imagen seguido de 4 valores para indicar la porción de cada lado del cuadro usado como imagen base para cada borde: superior, inferior, izquierod o derecho. Si se usa un mismo porcentaje o valor para todos se puede poner una sola cifra. Los significados de estos valors pueden resultar algo confusos ¿verdad? Partimos de la imagen que usamos como marco, en ella se definen 9 zonas:
Como ves estas zonas se definen con cuatro cortes, las lineas horizonales y verticales. Las regiones 1 a 4 son las esquinas que aparecerán en el borde del elmento mientras que las 5 a 8 formarán los cuatro lados. Y queda el centro que en principio es transparente a menos que se indique lo contrario con fill. Para definir esas zonas se usa la propiedad border-image-slice que contendrá hasta cuatro valores para indicar la posición de cada linea: top - rigth - bottom - left
border-image-slice: top right botto left
Los valores pueden ser porcentajes del ancho y el alto de la imagen o números que se interpretan como pixels. Puede llevar la clave fill par indicar que se use también la zona central de la imagen para el lado que corresponda.
border-image-slice: 20 15 30% /*top (right y left) bottom */
En esta linea indicamos que la linea damos el valor para top 20 pixels desde la esquina, left y right el mismo valor: 15 pixels desde sus esquinas y bottom 30% del alto de la imagen.
border-image-slice: 20% 30% /* (top, bottom) (right y left)*/
En esta linea decemos que las lineas de corte superior e inferior están al 20% de la altura de la imagen y las verticales están al 30% de la anchura de la imagen.
border-image-slice: 20% /* (top, bottom: 20% alto, right y left: 20% ancho)*/
En este caso todas están a la misma distancia de sus laterales: el 20% del ancho y del alto.
Si en cualquiera de los valores añadimos fill se usará la parte del centro de la imagen como fondo
Con esta propiedad se extraen las partes de la imagen que actuarán como un patrón de relleno en cada borde.
