CSS shape-outside Enhance Layouts with Custom Shapes

The CSS shape-outside property allows text to wrap around complex shapes like circles, polygons, and images.

Use it to create visually appealing layouts with various shape options.

Introduction

The shape-outside property in CSS is a powerful tool that lets you wrap text around complex shapes instead of just rectangular boxes. This can make your web pages more visually appealing. You can use shapes like circles, ellipses, polygons, and even images to create unique layouts.

This feature is widely supported and has been available since January 2020, so you can use it reliably across many devices and browsers.

Syntax

The shape-outside property uses various values to define how text wraps around an element. Here’s the basic syntax:

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* Shape box with basic shape */
shape-outside: circle() border-box;
shape-outside: margin-box ellipse();

/* <url> value */
shape-outside: url(image.png);

/* <gradient> value */
shape-outside: linear-gradient(45deg, #fff 150px, red 150px);

/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;

Values

The shape-outside property can take several values to define the shape around which text wraps:

`none`

Text wraps around the element’s margin box as usual.

`<shape-box>`

The float area is based on the element’s edges (margin-box, border-box, padding-box, or content-box).

`<basic-shape>`

Defines the shape using functions like circle(), ellipse(), inset(), or polygon().

`<image>`

Text wraps around the shape defined by the alpha channel of an image. If the image is invalid, it behaves like none.

Formal Definition

Here’s the formal definition of the shape-outside property:

Initial value	`none`
Applies to	floats
Inherited	no
Computed value	as defined for `<basic-shape>` (with `shape-box` following, if supplied), the `<image>` with its URI made absolute, otherwise as specified.
Animation type	yes, as specified for `<basic-shape>`, otherwise no

Formal Syntax

shape-outside =
  none
  | [ <basic-shape> || <shape-box> ]
  | <image>

<shape-box> =
  <visual-box> | margin-box

<image> =
  <url> | <gradient>

<visual-box> =
  content-box | padding-box | border-box

<url> =
  url( <string> <url-modifier>* ) | <url-token>

<src()> =
  src( <string> <url-modifier>* )

Examples

Example: Using `circle()`

HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS | shape-outside</title>
<style>
.outline {
  shape-outside: circle(25%);
  width: 100px;
  height: 200px;
  float: left;
}
</style>
</head>
<body>
<h1 style="color: green">Website</h1>
<b>CSS | shape-outside</b>
<p>shape-outside: circle(25%)</p>
<div class="outline"></div>
<div class="container">
Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
<br><br>
Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
</div>
</body>
</html>

Output:

![circle]WebsiteUrl

Example: Using `inset()`

HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS | shape-outside</title>
<style>
.outline {
  shape-outside: inset(50px 50px);
  width: 150px;
  height: 150px;
  float: left;
}
</style>
</head>
<body>
<h1 style="color: green">Website</h1>
<b>CSS | shape-outside</b>
<p>shape-outside: inset(50px 50px)</p>
<div class="outline"></div>
<div class="container">
Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
<br><br>
Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
</div>
</body>
</html>

Output:

![inset]WebsiteUrl

Example: Using an Image

HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS | shape-outside</title>
<style>
.outline {
  shape-outside: url("WebsiteUrl");
  background: url("WebsiteUrl") no-repeat;
  width: 150px;
  height: 150px;
  float: left;
}
</style>
</head>
<body>
<h1 style="color: green">Website</h1>
<b>CSS | shape-outside</b>
<p>shape-outside: url()</p>
<div class="outline"></div>
<div class="container">
Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
<br><br>
Website is a computer science portal with a huge variety of well written and explained computer science and programming articles, quizzes and interview questions. The portal also has dedicated GATE preparation and competitive programming sections.
</div>
</body>
</html>