{"id":203844,"date":"2015-06-17T03:11:46","date_gmt":"2015-06-17T10:11:46","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=203844"},"modified":"2020-10-01T11:40:11","modified_gmt":"2020-10-01T18:40:11","slug":"shape-outside","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-outside\/","title":{"rendered":"shape-outside"},"content":{"rendered":"\n<p>The <code>shape-outside<\/code> property controls how content will wrap around a floated element\u2019s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {  \n  float: left;\n  shape-outside: circle(50%);\n  width: 200px;\n  height: 200px;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-none media-203845\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/06\/shape-outside.png\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>It\u2019s important to note that this property will only work on floated elements for now, although this is likely to change in the future. The <code>shape-outside<\/code> property can also be manipulated with <a href=\"http:\/\/codepen.io\/robinrendle\/pen\/4275e31f9e95882054d400741b010dc6?editors=110\" rel=\"noopener\">transitions or animations<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul><li><code>circle()<\/code>: for making circular shapes.<\/li><li><code>ellipse()<\/code>: for making elliptical shapes.<\/li><li><code>inset()<\/code>: for making rectangular shapes.<\/li><li><code>polygon()<\/code>: for creating any shape with 3 or more vertices.<\/li><li><code>url()<\/code>: identifies which image should be used to wrap text around.<\/li><li><code>initial<\/code>: the float area is unaffected.<\/li><li><code>inherit<\/code>: inherits <code>shape-outside<\/code> value from parent.<\/li><\/ul>\n\n\n\n<p>The following values identify which reference of <a href=\"https:\/\/css-tricks.com\/the-css-box-model\">the box model<\/a> should be used for positioning the shape within:<\/p>\n\n\n\n<ul><li><code>margin-box<\/code><\/li><li><code>padding-box<\/code><\/li><li><code>border-box<\/code><\/li><\/ul>\n\n\n\n<p>These values should be appended to the end, for instance: <code>shape-outside: circle(50% at 0 0) padding-box<\/code>. By default the <code>margin-box<\/code> reference will be used.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"ellipse\">ellipse()<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  shape-outside: ellipse(150px 300px at 50% 50%);\n}<\/code><\/pre>\n\n\n\n<p>The <code>ellipse()<\/code> function requires the radii values for the x, y axis of the ellipse followed by the coordinates to position the center of the shape within its bounding box. For instance the example above will position the center of the ellipse in the vertical and horizontal center of the <code>.element<\/code> div:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_7fa99015d63597648d5e312c5b73ac25\" src=\"\/\/codepen.io\/anon\/embed\/7fa99015d63597648d5e312c5b73ac25?height=450&amp;theme-id=1&amp;slug-hash=7fa99015d63597648d5e312c5b73ac25&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 7fa99015d63597648d5e312c5b73ac25\" title=\"CodePen Embed 7fa99015d63597648d5e312c5b73ac25\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Although the demo above may suggest that we\u2019re changing the shape of the <code>div<\/code> itself, if we add borders and a background-image we\u2019ll find that the bounding box is in fact still rectangular:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_5e47a80626dfa27a42dd18a0e2b8450b\" src=\"\/\/codepen.io\/anon\/embed\/5e47a80626dfa27a42dd18a0e2b8450b?height=450&amp;theme-id=1&amp;slug-hash=5e47a80626dfa27a42dd18a0e2b8450b&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 5e47a80626dfa27a42dd18a0e2b8450b\" title=\"CodePen Embed 5e47a80626dfa27a42dd18a0e2b8450b\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It might be better to think of it this way: with the <code>shape-outside<\/code> property we\u2019re changing the relationship of other elements around an element, not the geometry of the element itself. To fix that we\u2019ll need to use <code>shape-outside<\/code> alongside the <code>clip-path()<\/code> property, such as in this example:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_4e5420d8c1a2766b25dd3c98f684bf9c\" src=\"\/\/codepen.io\/anon\/embed\/4e5420d8c1a2766b25dd3c98f684bf9c?height=450&amp;theme-id=1&amp;slug-hash=4e5420d8c1a2766b25dd3c98f684bf9c&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 4e5420d8c1a2766b25dd3c98f684bf9c\" title=\"CodePen Embed 4e5420d8c1a2766b25dd3c98f684bf9c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"circle\">circle()<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  shape-outside: circle(50%);\n}<\/code><\/pre>\n\n\n\n<p>This function creates a circle, and in the code example above it will create a circle with a radius that is half the height and width of <code>.element<\/code>. The <code>circle()<\/code> function can also use the same syntax for positioning the shape within.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"url\">url()<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  shape-outside: url('circle.png'); \n}<\/code><\/pre>\n\n\n\n<p>In this instance, we have two floated images, one on either side of a block of text. Since both images have the <code>shape-outside<\/code> property set then the text beneath will avoid those two floats.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_fbe5379f499f072e55fa1e4fbab5c8d5\" src=\"\/\/codepen.io\/anon\/embed\/fbe5379f499f072e55fa1e4fbab5c8d5?height=450&amp;theme-id=1&amp;slug-hash=fbe5379f499f072e55fa1e4fbab5c8d5&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed fbe5379f499f072e55fa1e4fbab5c8d5\" title=\"CodePen Embed fbe5379f499f072e55fa1e4fbab5c8d5\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s also possible to set the <code>shape-image-threshold<\/code> property which will inform the browser which pixels, depending on their transparency, should create the shape. For example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {  \n  shape-outside: url('image.png'); \n  shape-image-threshold: 0.5;\n}<\/code><\/pre>\n\n\n\n<p>In this example the only pixels that will create the shape must have 50% transparency and above. Values from <code>0.0<\/code> (transparent) to <code>1.0<\/code> (opaque) are valid.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"polygon\">polygon()<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  shape-outside: polygon(0 0, 0 200px, 300px 600px);\n}<\/code><\/pre>\n\n\n\n<p>This function creates any shape that has three or more vertices, for example:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_22b25bc2fdbcf4f1adf6f3822ff28156\" src=\"\/\/codepen.io\/anon\/embed\/22b25bc2fdbcf4f1adf6f3822ff28156?height=450&amp;theme-id=1&amp;slug-hash=22b25bc2fdbcf4f1adf6f3822ff28156&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 22b25bc2fdbcf4f1adf6f3822ff28156\" title=\"CodePen Embed 22b25bc2fdbcf4f1adf6f3822ff28156\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s important to note that if this property is going to be animated it requires the same number of vertices when you declare the animated state:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {  \n  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n  transition: shape-outside 1s;\n}\n.element:hover {  \n\tshape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"inset\">inset()<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  shape-outside: inset(100px 100px 100px 100px 10px);\n  \/* shape-outside: inset(top right bottom left border-radius); *\/\n}<\/code><\/pre>\n\n\n\n<p><code>inset()<\/code> is a function for making rectangular shapes, it takes five parameters but the fifth, for <code>border-radius<\/code> is optional. The other arguments are offsets inwards from edge of <code>.element<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_b2da5018d8f20ac3a2ccc26edb724db6\" src=\"\/\/codepen.io\/anon\/embed\/b2da5018d8f20ac3a2ccc26edb724db6?height=450&amp;theme-id=1&amp;slug-hash=b2da5018d8f20ac3a2ccc26edb724db6&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed b2da5018d8f20ac3a2ccc26edb724db6\" title=\"CodePen Embed b2da5018d8f20ac3a2ccc26edb724db6\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Above we have an element that is 200px wide by 200px tall and we\u2019re offsetting the shape within to 50px in every direction except the left side. This way the text will wrap above the shape even though the div extends to the top.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n<ul><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/clip\/\">clip-path<\/a><\/code><\/li><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-image-threshold\/\">shape-image-threshold<\/a><\/code><\/li><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-margin\/\">shape-margin<\/a><\/code><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/css-shapes\/#funcdef-ellipse\" rel=\"noopener\">CSS Shapes on W3C<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/shape-outside\" rel=\"noopener\">shape-outside on MDN<\/a><\/li><li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/shapes\/getting-started\" rel=\"noopener\">Getting started with CSS Shapes<\/a><\/li><li><a href=\"http:\/\/alistapart.com\/article\/css-shapes-101\" rel=\"noopener\">CSS Shapes on A List Apart<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-shapes\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">37<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">62<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">7.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">8*<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The shape-outside property controls how content will wrap around a floated element\u2019s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon: It\u2019s important to note that this property will only work on floated elements for now, although this is likely to change in the [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"parent":13947,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1123,1124],"acf":[],"jetpack-related-posts":[{"id":320118,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-margin\/","url_meta":{"origin":203844,"position":0},"title":"shape-margin","date":"August 31, 2020","format":false,"excerpt":"The CSS shape-margin property adds margin to CSS shapes that are created with the shape-outside property. It acts sorta like shape-image-threshold in that it changes the distance between the CSS shape and the content around it, but instead of working with opacity values to include semi-transparent pixels in the floated\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/shape-margin-illustration.svg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":319912,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-image-threshold\/","url_meta":{"origin":203844,"position":1},"title":"shape-image-threshold","date":"August 27, 2020","format":false,"excerpt":"The CSS shape-image-threshold property sets which pixels are included in the shape of an image when shape-outside is used to define the float area of a CSS element. Let's say we're using a linear gradient to define the float area of a CSS shape. Something like this where we go\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/gradient-to-transparent.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/","url_meta":{"origin":203844,"position":2},"title":"overflow","date":"September 5, 2011","format":false,"excerpt":"The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you've explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":340283,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-composite\/","url_meta":{"origin":203844,"position":3},"title":"mask-composite","date":"May 10, 2021","format":false,"excerpt":"The mask-composite CSS property allows us to combine a mask layer image with the mask layers below it. .element { mask-composite: subtract; } When there are multiple mask layer images, they need to be composited into one final mask layer.\u00a0mask-compositespecifies\u00a0how mask layers\u00a0with different shapes are combined into a single image.\u00a0Think\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14117,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-stroke\/","url_meta":{"origin":203844,"position":4},"title":"text-stroke","date":"September 6, 2011","format":false,"excerpt":"text-stroke is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is not currently included in any W3C or WHATWG specification. As of June 2013, it is only implemented behind a -webkit vendor prefix, though future versions of\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14067,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/list-style\/","url_meta":{"origin":203844,"position":5},"title":"list-style","date":"September 5, 2011","format":false,"excerpt":"The list-style property is a shorthand property that sets values for three different list-related properties in one declaration: ul { list-style: <list-style-type> || <list-style-position> || <list-style-image>; } Here's an example of the syntax: ul { list-style: square outside none; } Which would be the same as the following longhand version:\u2026","rel":"","context":"In \"list-style\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/203844"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=203844"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/203844\/revisions"}],"predecessor-version":[{"id":322490,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/203844\/revisions\/322490"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=203844"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=203844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}