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:
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
Examples
Example: Using circle()
HTML
Output:
![circle]WebsiteUrl
Example: Using inset()
HTML
Output:
![inset]WebsiteUrl
Example: Using an Image
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.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.