W3docs
pt
Entrar

Propriedade CSS shape-outside

Use a propriedade CSS shape-outside para envolver conteúdo ao redor de uma forma definida. Veja valores e exemplos.

A propriedade CSS shape-outside define uma forma em torno da qual o conteúdo inline adjacente (geralmente texto) é disposto. Ela permite sair do modelo de caixa retangular e fazer o texto fluir ao longo de um círculo, uma elipse, um polígono ou até mesmo a silhueta de uma imagem.

Por padrão, o conteúdo inline é envolvido ao redor da caixa de margem retangular de um elemento flutuante. A propriedade shape-outside substitui esse retângulo por uma forma personalizada, fazendo com que o texto siga curvas e ângulos em vez de arestas retas.

Esta página aborda o que shape-outside faz, os valores que ela aceita (<basic-shape>, <shape-box> e <image>), exemplos executáveis para cada um e os problemas comuns que você precisa conhecer para fazê-la funcionar.

Quando e por que usá-la

Use shape-outside quando quiser que o texto se ajuste a um objeto não retangular — por exemplo, envolvendo um parágrafo ao redor de um avatar circular, uma citação triangular ou uma foto de produto recortada. É um recurso puramente visual e apresentacional: ele muda como o texto flui, não a geometria real do elemento. O próprio elemento continua sendo uma caixa retangular.

Três regras são essenciais de lembrar:

  • O elemento deve ser flutuante. shape-outside só tem efeito em elementos flutuantes (float: left ou float: right). É ignorada em elementos que não são flutuantes.
  • O elemento precisa de largura e altura. Um <basic-shape> como circle() é resolvido em relação à caixa do elemento, portanto a caixa deve ter dimensões explícitas.
  • shape-outside não recorta o elemento. Ela apenas remodela a área de flutuação que o texto evita. Para recortar visualmente a caixa à mesma forma, combine-a com a propriedade clip-path usando a mesma função de forma (você verá isso nos exemplos abaixo).

Animações e transições podem manipular shape-outside quando o valor é um <basic-shape>.

Valor InicialNone
Aplica-se aQualquer elemento.
HerdadaNão.
AnimávelSim, conforme especificado para <basic-shape>.
VersãoCSS3
Sintaxe DOMobject.style.shapeOutside = "margin-box";

Sintaxe

shape-outside: none | <shape-box> | <basic-shape> | <image> | initial | inherit;

A propriedade complementar shape-margin adiciona espaço entre a forma e o texto envolvente, e shape-image-threshold controla quais pixels de uma imagem são considerados quando o valor é um <image>.

Exemplo: envolvendo texto ao redor de uma elipse

A função de forma ellipse() recebe dois raios e uma posição opcional. Observe como clip-path repete o mesmo valor para que a caixa verde visível corresponda à forma em torno da qual o texto é envolvido.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        shape-outside: ellipse(120px 200px at 40% 50%);
        clip-path: ellipse(120px 200px at 40% 50%);
        width: 300px;
        height: 500px;
        float: right;
        opacity: 0.6;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside property example</h2>
    <div></div>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>
Experimente Você Mesmo »

Exemplo: envolvendo texto ao redor de uma imagem

Quando o valor é um url() apontando para uma imagem, o navegador constrói a forma a partir do canal alfa da imagem — a área de flutuação segue os pixels não transparentes (opacos). Isso só funciona para imagens que permitem acesso CORS, e a imagem precisa de transparência para que o efeito seja visível.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 250px;
        shape-outside: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      }      
      .left {
        float: left;
      }      
      .right {
        float: right;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside property example</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="left" />
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="right" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>
Experimente Você Mesmo »

Exemplo: envolvendo texto ao redor de um polígono

A função polygon() aceita uma lista de pares de coordenadas x y que definem os vértices da forma. Use-a para triângulos, setas ou qualquer contorno livre com três ou mais pontos.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        shape-outside: polygon(0 0, 0 200px, 300px 600px);
        clip-path: polygon(0 0, 0 200px, 300px 600px);
        width: 300px;
        height: 300px;
        float: left;
        opacity: 0.3;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside property example</h2>
    <div></div>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>
Experimente Você Mesmo »

Valores

ValorDescrição
noneNenhuma forma é aplicada. A área de flutuação do elemento não é afetada.
<shape-box>A área de flutuação é determinada de acordo com a forma das arestas de um elemento flutuante. <shape-box> pode ser um dos quatro valores: margin-box, border-box, padding-box, content-box. Qualquer curvatura incluída na forma é criada pela propriedade border-radius.
<basic-shape>A área de flutuação é determinada por uma função de forma: inset() para retângulos inseridos, circle() para círculos, ellipse() para elipses e polygon() para qualquer forma com três ou mais vértices.
<image>A forma é extraída e determinada com base no canal alfa da <image> especificada.
initialFaz a propriedade usar seu valor padrão.
inheritHerda a propriedade do seu elemento pai.

Problemas comuns

  • Nada acontece se o elemento não for flutuante. Este é o erro mais comum. shape-outside é silenciosamente ignorada sem float: left ou float: right.
  • A caixa ainda parece retangular. shape-outside apenas altera a área de flutuação, não a aparência do elemento. Adicione um clip-path correspondente se quiser que a caixa seja visualmente recortada à forma também.
  • Porcentagens são resolvidas em relação à caixa do elemento, portanto, um elemento sem altura (ou com altura colapsada) não produzirá a forma esperada.
  • Use shape-margin para dar espaço. O texto pode ficar muito próximo da borda da forma; shape-margin adiciona um espaçamento uniforme.

Suporte dos navegadores

shape-outside é suportada em todos os navegadores modernos (Chrome, Edge, Firefox, Safari e Opera). Degrada graciosamente: em um navegador que não a suporta, o texto simplesmente envolve a caixa retangular do elemento.

Propriedades relacionadas

  • float — necessária para que shape-outside tenha efeito.
  • border-radius — arredonda os cantos do valor <shape-box>, que shape-outside seguirá em seguida.

Prática

Prática
O que a propriedade 'shape-outside' no CSS faz?
O que a propriedade 'shape-outside' no CSS faz?
Was this page helpful?