Propriedade CSS border-image-outset - Learn CSS

A propriedade CSS border-image-outset especifica a quantidade pela qual a área da imagem de borda se estende além da caixa de borda do elemento. Ela é uma das propriedades CSS3.

Por padrão, uma imagem de borda é desenhada dentro da caixa de borda. Empurrá-la para fora com border-image-outset é útil quando você deseja que o quadro decorativo ultrapasse o elemento — por exemplo, uma borda ornamental, um quadro com efeito de sombra, ou um efeito de faixa que deve ficar fora do conteúdo em vez de sobrecarregá-lo.

O outset apenas altera onde a imagem é desenhada; ele não afeta o tamanho da caixa do elemento nem o seu layout. A área extra pode sobrepor conteúdo vizinho, portanto deixe espaço suficiente (ou margem extra) ao redor do elemento para evitar cortes ou sobreposições.

Como funciona

border-image-outset aceita de um a quatro valores, seguindo o padrão padrão CSS de atalho superior–direito–inferior–esquerdo:

Um valor define todos os quatro outsets.
Dois valores — o primeiro define superior e inferior, o segundo define direito e esquerdo.
Três valores — o primeiro define o superior, o segundo define direito e esquerdo, o terceiro define o inferior.
Quatro valores são aplicados aos lados superior, direito, inferior e esquerdo, nessa ordem.

Cada valor pode ser um <length> (como 10px) ou um <number> sem unidade. Um número é um múltiplo da largura de borda correspondente do elemento: com border-width: 10px, um outset de 2 resulta em 20px. Valores negativos não são permitidos.

A propriedade não tem efeito visível a menos que uma fonte de imagem de borda seja definida (via border-image ou border-image-source).

Valor Inicial	0
Aplica-se a	Todos os elementos, exceto elementos de tabela internos quando border-collapse é "collapse". Também se aplica a ::first-letter.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.borderImageOutset = "20px";

Sintaxe

Valores CSS border-image-outset

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

Exemplo da propriedade border-image-outset:

Exemplo 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>

Experimente Você Mesmo »

Resultado

![Descrição do CSS border-image-outset](/uploads/media/default/0001/04/9e351aa1549808ee733c6e1e41ae3509c9b7611e.png "Exemplo de CSS border-image-outset" =420x)

No exemplo acima, a imagem de borda é empurrada 10px além da borda superior, mantida alinhada à direita (0), e empurrada 15px além da borda inferior — fazendo com que o quadro ultrapasse visivelmente o parágrafo.

Valores

Valor	Descrição	Experimente
`length`	A distância pela qual a imagem de borda se estende além da caixa de borda, expressa em qualquer unidade de comprimento CSS (`px`, `em`, etc.). O padrão é `0`.	Experimente »
`number`	Um múltiplo sem unidade da largura de borda correspondente do elemento. Por exemplo, `2` com uma borda de `10px` equivale a `20px`.	Experimente »
`initial`	Define a propriedade com seu valor padrão (`0`).	Experimente »
`inherit`	Herda a propriedade do seu elemento pai.

Propriedades relacionadas

border-image-outset é uma parte do atalho border-image. Estas propriedades complementares controlam o restante do efeito:

border-image — o atalho que define todos os valores de border-image de uma vez.
border-image-source — a imagem a ser usada como borda.
border-image-slice — como a imagem fonte é dividida nas nove regiões de borda.
border-image-width — a largura da área da imagem de borda.
border-image-repeat — se os recortes são esticados, repetidos ou arredondados.

Prática

Qual é o propósito da propriedade 'border-image-outset' no CSS?

É usada para definir a imagem de borda de um elemento.É usada para alterar a cor de fundo de um elemento.É usada para estender a área da imagem de borda além da borda de um elemento.É usada para limitar a área da imagem de borda dentro da borda de um elemento.É usada para definir o tamanho da fonte de um elemento.