los border-image-outsetCSS La propiedad establece la distancia a la que se establece la imagen de borde de un elemento desde su cuadro de borde.

Las partes de la imagen de borde que se representan fuera del cuadro de borde del elemento con border-image-outset no active las barras de desplazamiento de desbordamiento y no capture los eventos del mouse.

Sintaxis

/*  value */border-image-outset: 1rem;/*  value */border-image-outset: 1.5;/* vertical | horizontal */border-image-outset: 1 1.2;/* top | horizontal | bottom */border-image-outset: 30px 2 45px;/* top | right | bottom | left */border-image-outset: 7px 12px 14px 5px;/* Global values */border-image-outset: inherit;border-image-outset: initial;border-image-outset: unset;

los border-image-outset La propiedad se puede especificar como uno, dos, tres o cuatro valores. Cada valor es un o . Los valores negativos no son válidos y provocarán border-image-outset declaración para ser ignorada.

  1. Si uno se especifica el valor, se aplica a los cuatro lados.
  2. Si dos se especifican los valores, el primero se aplica a la arriba y abajo y el segundo al izquierda y derecha.
  3. Si Tres se especifican los valores, el primero se aplica a la cima, el segundo al izquierda y derecha, y el tercero al fondo.
  4. Si cuatro se especifican los valores, se aplican a la cima, Derecha, fondo, y izquierda en ese orden (en el sentido de las agujas del reloj).

Valores

El tamaño de la border-image comienzo como una dimensión – un número con una unidad.
El tamaño de la border-image principio como un múltiplo de los elementos correspondientes border-widths. Por ejemplo, si un elemento tiene border-width: 1em 2px 0 1.5rem, y border-image-outset: 2, el final border-image-outset se calcularía como 2em 4px 0 3rem.

Definicion formal

Valor inicial 0
Se aplica a todos los elementos, excepto los elementos internos de la tabla cuando border-collapse es collapse. También se aplica a ::first-letter.
Heredado no
Valor calculado como se especifica, pero con longitudes relativas convertidas en longitudes absolutas
Tipo de animación por tipo de valor calculado

Sintaxis formal

[|]1,4

Ejemplos de

Marcando una imagen de borde

HTML

<divid="outset">This element has an outset border image!div>

CSS

#outsetwidth: 10rem;background: #cef;border: 1.4rem solid;border-image:radial-gradient(#ff2, #55f) 40;border-image-outset: 1.5;/* 1.5 × 1.4rem = 2.1rem */margin: 2.1rem;

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de fondos y bordes CSS, nivel 3
La definición de ‘inicio de imagen de borde’ en esa especificación.		 Recomendación candidata Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
border-image-outset 15 12 15 11 15 6 ≤37 18 15 14 6 1.0

Ver también