Propiedad CSS border-image-outset
Ejemplo
Coloque la imagen del borde 10 píxeles fuera de los bordes del borde de un elemento:
#borderimg
{
border-image-source: url(border.png);
border-image-outset: 10px;
}
Definición y uso
La border-image-outsetpropiedad especifica la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde.
Sugerencia: observe también la propiedad border-image (una propiedad abreviada para configurar todas las propiedades border-image-*).
| Valor por defecto: | 0 |
|---|---|
| Heredado: | No |
| Animable: | No. Leer sobre animable |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | objeto .style.borderImageOutset="10px" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| border-image-outset | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Sintaxis CSS
border-image-outset: length|number|initial|inherit;
Nota: La border-image-outsetpropiedad puede tomar de uno a cuatro valores (lados superior, derecho, inferior e izquierdo). Si se omite el cuarto valor, es lo mismo que el segundo. Si también se omite el tercero, es lo mismo que el primero. Si también se omite el segundo, es lo mismo que el primero.
Valores de propiedad
| Value | Description | Play it |
|---|---|---|
| length | A length unit specifying how far from the edges the border-image will appear. Default value is 0 | |
| number | Represent multiples of the corresponding border-width | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial de CSS: imágenes de borde CSS
Referencia CSS: propiedad border-image
Referencia CSS: propiedad border-image-repeat
Referencia CSS: propiedad border-image-slice
Referencia CSS: propiedad border-image-source
Referencia CSS: propiedad border-image-width
Referencia HTML DOM: propiedad borderImageOutset