Propiedad CSS border-image-outset
La propiedad CSS border-image-outset especifica la distancia en que la imagen del borde se extiende más allá de su caja de borde. Ver ejemplos.
La propiedad CSS border-image-outset especifica la cantidad en que el área de la imagen de borde se extiende más allá de la caja de borde del elemento. Es una de las propiedades de CSS3.
Por defecto, una imagen de borde se dibuja dentro de la caja de borde. Empujarla hacia afuera con border-image-outset es útil cuando se desea que el marco decorativo sobresalga del elemento — por ejemplo, un borde ornamental, un marco tipo sombra o un efecto de cinta que debe quedar fuera del contenido en lugar de comprimirlo.
El desplazamiento solo cambia dónde se dibuja la imagen; no afecta el tamaño de la caja del elemento ni su disposición en el flujo. El área extra puede superponerse al contenido vecino, así que deja suficiente espacio (o margen adicional) alrededor del elemento para evitar recortes o superposiciones.
Cómo funciona
border-image-outset acepta de uno a cuatro valores, siguiendo el patrón estándar de CSS para la notación abreviada superior–derecho–inferior–izquierdo:
- Un valor establece los cuatro desplazamientos.
- Dos valores — el primero establece la parte superior e inferior, el segundo establece la derecha e izquierda.
- Tres valores — el primero establece la parte superior, el segundo establece derecha e izquierda, el tercero establece la parte inferior.
- Cuatro valores se aplican a los lados superior, derecho, inferior e izquierdo, en ese orden.
Cada valor puede ser un <length> (como 10px) o un <number> sin unidades. Un número es un múltiplo del ancho de borde correspondiente del elemento: con border-width: 10px, un desplazamiento de 2 equivale a 20px. No se permiten valores negativos.
La propiedad no tiene efecto visible a menos que se haya definido una fuente de imagen de borde (mediante border-image o border-image-source).
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos, excepto los elementos internos de tabla cuando border-collapse es "collapse". También se aplica a ::first-letter. |
| Heredado | No. |
| Animatable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.borderImageOutset = "20px"; |
Sintaxis
Valores de CSS border-image-outset
border-image-outset: length | number | initial | inherit;Ejemplo de la propiedad border-image-outset:
Ejemplo de código CSS border-image-outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 10px 0 15px;
}
</style>
</head>
<body>
<h2>Border-image-outset property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
</body>
</html>Resultado
![Descripción de CSS border-image-outset](/uploads/media/default/0001/04/9e351aa1549808ee733c6e1e41ae3509c9b7611e.png "Ejemplo de CSS border-image-outset" =420x)
En el ejemplo anterior, la imagen de borde se desplaza 10px más allá del borde superior, permanece al ras en la derecha (0) y se desplaza 15px más allá del borde inferior — por lo que el marco sobresale visiblemente del párrafo.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
length | La distancia en que la imagen de borde se extiende más allá de la caja de borde, expresada en cualquier unidad de longitud CSS (px, em, etc.). El valor predeterminado es 0. | Pruébalo » |
number | Un múltiplo sin unidades del ancho de borde correspondiente del elemento. Por ejemplo, 2 con un borde de 10px equivale a 20px. | Pruébalo » |
initial | Establece la propiedad en su valor predeterminado (0). | Pruébalo » |
inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
border-image-outset es una parte de la propiedad abreviada border-image. Estas propiedades complementarias controlan el resto del efecto:
- border-image — la propiedad abreviada que establece todos los valores de border-image a la vez.
- border-image-source — la imagen que se usa como borde.
- border-image-slice — cómo se divide la imagen fuente en las nueve regiones del borde.
- border-image-width — el ancho del área de la imagen de borde.
- border-image-repeat — si los segmentos se estiran, repiten o redondean.