Propiedad CSS shape-outside

La propiedad CSS shape-outside define una forma alrededor de la cual se envuelve el contenido en línea adyacente (generalmente texto). Te permite salir del modelo de caja rectangular y hacer que el texto fluya a lo largo de un círculo, una elipse, un polígono o incluso la silueta de una imagen.

De forma predeterminada, el contenido en línea se envuelve alrededor del margin box rectangular de un elemento flotante. La propiedad shape-outside reemplaza ese rectángulo con una forma personalizada, de modo que el texto sigue curvas y ángulos en lugar de bordes rectos.

Esta página explica qué hace shape-outside, los valores que acepta (<basic-shape>, <shape-box> e <image>), ejemplos ejecutables para cada uno, y los errores comunes que debes conocer para que funcione correctamente.

Cuándo y por qué usarla

Usa shape-outside cuando quieras que el texto se ajuste a un objeto no rectangular — por ejemplo, envolver un párrafo alrededor de un avatar circular, una cita destacada triangular o una foto de producto recortada. Es una característica puramente visual y de presentación: cambia cómo fluye el texto, no la geometría real del elemento. El elemento en sí sigue siendo una caja rectangular.

Hay tres reglas esenciales que debes recordar:

El elemento debe estar flotante. shape-outside solo tiene efecto en elementos flotantes (float: left o float: right). Se ignora en elementos que no están flotantes.
El elemento necesita ancho y alto. Un <basic-shape> como circle() se resuelve en relación con la caja del elemento, por lo que la caja debe tener dimensiones explícitas.
shape-outside no recorta el elemento. Solo remodela el área de flotación que el texto evita. Para recortar visualmente la caja a la misma forma, combínalo con la propiedad clip-path usando la misma función de forma (lo verás en los ejemplos siguientes).

Las animaciones y transiciones pueden manipular shape-outside cuando el valor es un <basic-shape>.

Valor inicial	None
Aplicable a	Cualquier elemento.
Heredado	No.
Animable	Sí, según se especifica para `<basic-shape>`.
Versión	CSS3
Sintaxis DOM	object.style.shapeOutside = "margin-box";

Sintaxis

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

La propiedad complementaria shape-margin añade espacio entre la forma y el texto envolvente, y shape-image-threshold controla qué píxeles de una imagen cuentan cuando el valor es una <image>.

Ejemplo: envolver texto alrededor de una elipse

La función de forma ellipse() toma dos radios y una posición opcional. Observa cómo clip-path repite el mismo valor para que el cuadro verde visible coincida con la forma alrededor de la cual se envuelve el texto.

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

Pruébalo tú mismo »

Ejemplo: envolver texto alrededor de una imagen

Cuando el valor es un url() que apunta a una imagen, el navegador construye la forma a partir del canal alfa de la imagen — el área de flotación sigue los píxeles no transparentes (opacos). Esto solo funciona con imágenes que permiten acceso CORS, y la imagen necesita transparencia para que el efecto sea visible.

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

Pruébalo tú mismo »

Ejemplo: envolver texto alrededor de un polígono

La función polygon() acepta una lista de pares de coordenadas x y que definen los vértices de la forma. Úsala para triángulos, flechas o cualquier contorno libre con tres o más puntos.

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

Pruébalo tú mismo »

Valores

Valor	Descripción
none	No se aplica ninguna forma. El área de flotación del elemento no se ve afectada.
`<shape-box>`	El área de flotación se determina según la forma de los bordes de un elemento flotante. `<shape-box>` puede ser uno de los cuatro valores: margin-box, border-box, padding-box, content-box. Cualquier curvatura incluida en la forma es creada por la propiedad border-radius.
`<basic-shape>`	El área de flotación se determina mediante una función de forma: `inset()` para rectángulos insertados, `circle()` para círculos, `ellipse()` para elipses y `polygon()` para cualquier forma con tres o más vértices.
`<image>`	La forma se extrae y determina en función del canal alfa de la `<image>` especificada.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Errores comunes

No ocurre nada si el elemento no está flotante. Este es el error más común. shape-outside se ignora silenciosamente sin float: left o float: right.
La caja sigue viéndose rectangular. shape-outside solo cambia el área de flotación, no la apariencia del elemento. Añade un clip-path coincidente si quieres que la caja sea visualmente recortada a la forma también.
Los porcentajes se resuelven en relación con la caja del elemento, por lo que un elemento sin alto (o uno colapsado) no producirá la forma esperada.
Usa shape-margin para dar espacio. El texto puede quedar muy pegado al borde de la forma; shape-margin añade un margen uniforme.

Soporte en navegadores

shape-outside está soportado en todos los navegadores modernos (Chrome, Edge, Firefox, Safari y Opera). Degrada con elegancia: en un navegador que no lo soporte, el texto simplemente se envuelve alrededor de la caja rectangular del elemento.

Propiedades relacionadas

float — requerido para que shape-outside tenga efecto.
border-radius — redondea las esquinas del valor <shape-box>, que shape-outside seguirá a continuación.

Práctica

¿Qué hace la propiedad 'shape-outside' en CSS?

Define una forma alrededor de la cual se envuelve el textoEspecifica la forma de un botónSe usa para crear formas geométricasPermite que un elemento sea sacado del flujo normal y colocado a lo largo del lado izquierdo o derecho de su bloque contenedorDefine la forma de una página web