Tillitsdone
down Scroll to discover
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.
thumbnail

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 valuenone
Applies tofloats
Inheritedno
Computed valueas defined for <basic-shape> (with shape-box following, if supplied), the <image> with its URI made absolute, otherwise as specified.
Animation typeyes, 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>

Output:

![image]WebsiteUrl

Browser Compatibility

The shape-outside property is widely supported across modern browsers:

  • Chrome 37
  • Firefox 62
  • Safari 10.1
  • Opera 24

Specifications

The shape-outside property is defined in the CSS Shapes Module Level 1 specification. For more details, see the official specification:

Specification
CSS Shapes Module Level 1 # shape-outside-property

See Also

For more information on related CSS properties and concepts, refer to:

Help Improve MDN

This page was last modified on Aug 3, 2024 by MDN contributors.

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.