rick@tillitsdone.com

+66824564755

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.

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>

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

Help Improve MDN

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

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-border-block-start.png

CSS Border-Block-Start Simplified Border Styling CSS border-block-start is a versatile property for setting block-start border styles in a single declaration. Use it to simplify border definitions, adaptable to various writing modes and text orientations. Options include width, style, and color.

css_property_cover/css-property-border-bottom-color.png

CSS Border-Bottom-Color Customize Bottom Border Colors CSS border-bottom-color sets the color of an element's bottom border. Use named colors, hexadecimal values, RGB, RGBA, HSL, or HSLA to customize the appearance. Learn about syntax, values, and examples.

css_property_cover/css-property-content.png

CSS Content Enhance Web Design with Dynamic Elements Learn how to use CSS content to enhance your web designs by adding dynamic elements such as text, images, counters, and quotes. Explore available options like normal, none, string, URI, and more.

css_property_cover/css-property-font-variant.png

CSS Font-Variant Enhance Typography with Ease Discover how to use CSS font-variant to enhance your web typography. Explore available options like small-caps, ligatures, and more for better text styling.

css_property_cover/css-property-padding-top.png

CSS Padding-Top Enhance Layouts with Simple Spacing Learn about CSS padding-top to control space between content and borders. Use pixels, percentages, and global values for precise layouts.

css_property_cover/css-property-border-inline-end-width.png

CSS border-inline-end-width Enhance Responsive Design Learn how to use CSS border-inline-end-width to create adaptable layouts. This property adjusts the border width based on writing mode, direction, and text orientation. Options include specific lengths, keywords like 'thick', and global values.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep 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

Facebook Instagram LinkedIn

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.

DesignRush
web design companies

Goodfirms

CSS shape-outside Enhance Layouts with Custom Shapes

Introduction

Syntax

Values

none

<shape-box>

<basic-shape>

<image>

Formal Definition

Formal Syntax

Examples

Example: Using circle()

HTML

Example: Using inset()

HTML

Example: Using an Image

HTML

Browser Compatibility

Specifications

See Also

Help Improve MDN

Talk with CEO

`none`

`<shape-box>`

`<basic-shape>`

`<image>`

Example: Using `circle()`

Example: Using `inset()`