path: root/files/tr/web/css/shape-outside/index.html

---
title: shape-outside
slug: Web/CSS/shape-outside
tags:
  - Boundaries
  - CSS
  - CSS Property
  - CSS Shapes
  - Float Area
  - Property
  - Reference
  - Shape
  - margin
  - 'recipe:css-property'
  - shape-outside
  - wrapping
translation_of: Web/CSS/shape-outside
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">The <strong><code>shape-outside</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.</span> By default, inline content wraps around its margin box; <code>shape-outside</code> provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.</p>

<div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div>



<h2 id="Syntax">Syntax</h2>

<pre class="brush:css no-line-numbers notranslate">/* 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-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* &lt;url&gt; value */
shape-outside: url(image.png);

/* &lt;gradient&gt; value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;
</pre>

<p>The <code>shape-outside</code> property is specified using the values from the list below, which define the <em>float area</em> for <em>float elements</em>. The float area determines the shape around which inline content (float elements) wrap.</p>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>The float area is unaffected. Inline content wraps around the element's margin box, like usual.</dd>
 <dt><code>&lt;shape-box&gt;</code></dt>
 <dd>The float area is computed according to the shape of a float element's edges (as defined by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">CSS box model</a>). This can be <code>margin-box</code>, <code>border-box</code>, <code>padding-box</code>, or <code>content-box</code>. The shape includes any curvature created by the {{cssxref("border-radius")}} property (behavior which is similar to {{cssxref("background-clip")}}).</dd>
 <dd>
 <dl>
  <dt><code>margin-box</code></dt>
  <dd><span style="line-height: 1.5;">Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding {{cssxref("border-radius")}} and {{cssxref("margin")}} values. If the <code>border-radius / margin</code> </span>ratio is <code>1</code> or more, then the margin box corner radius is <code>border-radius + margin</code>. If the ratio is less than <code>1</code>, then the margin box corner radius is <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd>
  <dt><code>border-box</code></dt>
  <dd>
  <p>Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.</p>
  </dd>
  <dt><code>padding-box</code></dt>
  <dd>
  <p>Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.</p>
  </dd>
  <dt><code>content-box</code></dt>
  <dd>
  <p>Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of <code>0</code> or <code>border-radius - border-width - padding</code>.</p>
  </dd>
 </dl>
 </dd>
 <dt>{{cssxref("&lt;basic-shape&gt;")}}</dt>
 <dd>The float area is computed based on the shape created by of one of <code><a href="/en-US/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>,  <code><a href="/en-US/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>, or as added in the level 2 specification <code>path()</code>. If a <code>&lt;shape-box&gt;</code> is also supplied, it defines the reference box for the <code>&lt;basic-shape&gt;</code> function. Otherwise, the reference box defaults to <code>margin-box</code>.</dd>
 <dt>{{cssxref("&lt;image&gt;")}}</dt>
 <dd>The float area is extracted and computed based on the alpha channel of the specified {{cssxref("&lt;image&gt;")}} as defined by {{cssxref("shape-image-threshold")}}.</dd>
 <dd>
 <div class="note"><strong>Note:</strong> {{glossary("User agent", "User agents")}} must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a <code>shape-outside</code> value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value <code><strong>none</strong></code> had been specified.</div>
 </dd>
</dl>

<h2 id="Interpolation">Interpolation</h2>

<p>When animating between one <code>&lt;basic-shape&gt;</code> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, or {{cssxref("calc")}} where possible. If list values are not one of those types but are identical (such as finding <code>nonzero</code> in the same list position in both lists), those values do interpolate.</p>

<ul>
 <li>Both shapes must use the same reference box.</li>
 <li>If both shapes are the same type, that type is <code>ellipse()</code> or <code>circle()</code>, and none of the radii use the <code>closest-side</code> or <code>farthest-side</code> keywords, interpolate between each value in the shape functions.</li>
 <li>If both shapes are of type <code>inset()</code>, interpolate between each value in the shape functions.</li>
 <li>If both shapes are of type <code>polygon()</code>, both polygons have the same number of vertices, and use the same <code>&lt;fill-rule&gt;</code>, interpolate between each value in the shape functions.</li>
 <li>In all other cases no interpolation occurs.</li>
</ul>

<h2 id="Formal_definition">Formal definition</h2>

<p>{{CSSInfo}}</p>

<h2 id="Formal_syntax">Formal syntax</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Examples">Examples</h2>

<h3 id="Funneling_text">Funneling text</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="main"&gt;
  &lt;div class="left"&gt;&lt;/div&gt;
  &lt;div class="right"&gt;&lt;/div&gt;
  &lt;p&gt;
    Sometimes a web page's text content appears to be
    funneling your attention towards a spot on the page
    to drive you to follow a particular link. Sometimes
    you don't notice.
  &lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css; highlight[13,14,21,22] notranslate">.main {
  width: 530px;
}

.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}</pre>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample("Funneling_text", "100%", 130)}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}</td>
   <td>{{Spec2('CSS Shapes')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS Shapes 2', '#shape-outside-property', 'shape-outside')}}</td>
   <td>{{Spec2('CSS Shapes 2')}}</td>
   <td>Adds the <code>path()</code> value</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>


<p>{{Compat("css.properties.shape-outside")}}</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Shapes">CSS Shapes</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Shapes from Box Values</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Basic Shapes</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Shapes from Images</a></li>
 <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
 <li>{{cssxref("shape-margin")}}</li>
 <li>{{cssxref("shape-image-threshold")}}</li>
</ul>