Propiedad CSS border-image-outset

La propiedad CSS border-image-outset especifica la cantidad en la que la imagen del borde se extiende más allá del cuadro del borde del elemento. Es una de las propiedades CSS3. La propiedad border-image-outset acepta de uno a cuatro valores.

Cuando se especifica un valor, se aplica a las cuatro extensiones.
Cuando se especifican dos valores, el primero especifica las extensiones superior e inferior, y el segundo especifica las extensiones derecha e izquierda.
Cuando se especifican tres valores, el primero especifica la extensión superior, el segundo especifica las extensiones derecha e izquierda, y el tercero especifica la extensión inferior.
Cuando se especifican cuatro valores, las extensiones se establecen en los lados superior, derecho, inferior e izquierdo, en ese orden.

Valor inicial	0
Se aplica a	Todos los elementos, excepto los elementos de tabla internos cuando border-collapse es "collapse". También se aplica a ::first-letter.
Heredado	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.borderImageOutset = "20px";

Sintaxis

Valores de CSS border-image-outset

css

border-image-outset: length | number | initial | inherit;

Ejemplo de la propiedad border-image-outset:

Ejemplo de código CSS border-image-outset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://es.w3docs.com/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="https://es.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
  </body>
</html>

Try it Yourself »

Resultado

CSS border-image-outset description

Valores

Valor	Descripción	Probar
length	Especifica a qué distancia de los bordes aparecerá la border-image. El valor predeterminado es 0.	Probar »
number	El tamaño de la extensión de border-image como un múltiplo de los anchos de borde correspondientes del elemento.	Probar »
initial	Establece la propiedad en su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es el propósito de la propiedad 'border-image-outset' en CSS?

Se utiliza para establecer el borde de imagen de un elemento.Se utiliza para cambiar el color de fondo de un elemento.Se utiliza para extender el área de la imagen del borde más allá del borde de un elemento.Se utiliza para limitar el área de la imagen del borde dentro del borde de un elemento.Se utiliza para establecer el tamaño de fuente de un elemento.

Propiedad CSS border-image-outset ​

Sintaxis ​

Ejemplo de la propiedad border-image-outset: ​

Resultado ​