MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Resumen

La propiedad border-image-outset describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.

Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen.

Valor inicial0s
Applies toall elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Heredableno
Mediavisual
Valor calculadoas specified, but with relative lengths converted into absolute lengths
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

/* border-image-outset: sides */
border-image-outset: 1.5;

/* border-image-outset: vertical horizontal */
border-image-outset: 1 1.2;

/* border-image-outset: top horizontal bottom */
border-image-outset: 30px 2 45px;

/* border-image-outset: top right bottom left */
border-image-outset: 7px 12px 14px 5px;

border-image-outset: inherit;

Valores

Cuando un valor se especifica como valor <number> sin unidad, el valor es multiplicado por el border-width calculado correspondiente, para determinar el valor de border-image-outset. Los valores negativos no son permitidos.

sides
Es un valor <length><number> para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones.
horizontal
Es un valor <length><number> para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha).
vertical
Es un valor <length><number> para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior).
top
Es un valor <length><number> para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja.
bottom
Es un valor <length><number> para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja.
right
Es un valor <length><number> para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja.
left
Es un valor <length><number> para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja.
inherit
Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre.

Sintaxis formal

[ <length> | <number> ]{1,4}

Especificaciones

Especificación Estatus Comentarios
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image-outset' in that specification.
Candidate Recommendation Definición inicial

Compatibilidad de navegadores

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 15.0 (Yes) 15.0 (15.0) 11 15 6
Característica Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? (Yes) 15.0 (15.0) No support ? ?

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,