0 FPS
Propiedad CSS : border-image-slice
La web está en segundo plano, animación en pausa.
Cargando animación...

Esta propiedad nos permite especificar la porción de la imagen que se va a utilizar para el borde. Para entendernos mejor tenemos que pensar en una imagen dividida en 9 partes (3 filas y 3 columnas).
Por ejemplo la imagen de la derecha tiene 90 píxeles de ancho y de alto, por lo tanto si la dividimos equitativamente en 9 partes cada celda ocupara 30x30.
Sintaxis
border-image-slice: ValorTRBL; border-image-slice: TopBottom LeftRight; border-image-slice: Top LeftRight Bottom; border-image-slice: Top Left Bottom Right;
/* 1 valor para todos los costados. */ /* 2 valores : arriba y abajo, derecha y izquierda. */ /* 3 valores : arriba, derecha y izquierda, abajo.*/ /* 4 valores : arriba, derecha, abajo, izquierda. */
Podemos especificar hasta 4 valores (uno por cada costado).
Si especificamos solo un valor, se aplicará a los 4 costados.
Si especificamos 2 valores, el primer valor se asignará a top / bottom, y el segundo valor a left / right.
Si especificamos 3 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom.
Si especificamos 4 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom, y el cuarto al left.
Si especificamos solo un valor, se aplicará a los 4 costados.
Si especificamos 2 valores, el primer valor se asignará a top / bottom, y el segundo valor a left / right.
Si especificamos 3 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom.
Si especificamos 4 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom, y el cuarto al left.
Valor | Permite definir el tamaño que se extraerá de la imagen origen. Se puede especificar un valor numérico o un porcentaje, los valores numéricos representarán píxeles para imagénes rasterizadas, y coordenadas para las imagenes vectorizadas. |
Código de ejemplo
Compatibilidad
Esta propiedad es soportada por todos los navegadores compatibles con CSS3.
Soportado a partir de la versión 15 | |
Soportado a partir de la versión 16 | |
Soportado a partir de la versión 15 | |
Soportado a partir de la versión 6 | |
Soportado a partir de la versión 11 |
Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020
Enlaces relacionados
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width