{"id":395474,"date":"2026-06-02T13:14:57","date_gmt":"2026-06-02T19:14:57","guid":{"rendered":"https:\/\/css-tricks.com\/?p=395474"},"modified":"2026-06-02T21:19:51","modified_gmt":"2026-06-03T03:19:51","slug":"quick-hit-142","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/quick-hit-142\/","title":{"rendered":"Quick Hit #142"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.chrome.com\/release-notes\/149\" rel=\"noopener\">Chrome 149<\/a> upgrades <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-outside\/\"><code>shape-outside<\/code><\/a> to support <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Values\/basic-shape\/rect\" rel=\"noopener\"><code>rect()<\/code><\/a> and <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/x\/xywh\/\"><code>xywh()<\/code><\/a> (now Baseline) as well as <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/p\/path\/\"><code>path()<\/code><\/a> and <a href=\"https:\/\/css-tricks.com\/almanac\/functions\/s\/shape\/\"><code>shape()<\/code><\/a> (no other web browsers support these ones).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chrome 149 upgrades shape-outside to support rect() and xywh() (now Baseline) as well as path() and shape() (no other web [&hellip;]<\/p>\n","protected":false},"author":288677,"featured_media":300990,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19079],"tags":[1021,478,1124],"class_list":["post-395474","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-quick-hits","tag-chrome","tag-css","tag-shape-outside"],"acf":{"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":393454,"url":"https:\/\/css-tricks.com\/quick-hit-121\/","url_meta":{"origin":395474,"position":0},"title":"Quick Hit #121","author":"Daniel Schwarz","date":"April 10, 2026","format":false,"excerpt":"Chrome 147 becomes the first to ship border-shape as well as the scroll range for view timelines.","rel":"","context":"In &quot;Quick Hits&quot;","block_context":{"text":"Quick Hits","link":"https:\/\/css-tricks.com\/category\/quick-hits\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":392568,"url":"https:\/\/css-tricks.com\/quick-hit-103\/","url_meta":{"origin":395474,"position":1},"title":"Quick Hit #103","author":"Daniel Schwarz","date":"February 25, 2026","format":false,"excerpt":"Firefox 148 makes shape() available without a flag, aligning with Chrome and Safari.","rel":"","context":"In &quot;Quick Hits&quot;","block_context":{"text":"Quick Hits","link":"https:\/\/css-tricks.com\/category\/quick-hits\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":392302,"url":"https:\/\/css-tricks.com\/whats-important-5\/","url_meta":{"origin":395474,"position":2},"title":"What\u2019s !important #5: Lazy-loading iframes, Repeating corner-shape Backgrounds, and More","author":"Daniel Schwarz","date":"February 13, 2026","format":false,"excerpt":"This issue of What\u2019s !important is dedicated to our friends in the UK, who are currently experiencing a very miserable 43-day rain streak. Presenting: the five most interesting things to read about CSS from the last couple of weeks. Plus, the latest features from Chrome 145, and anything else you\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/wi5.jpg?fit=1200%2C612&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/wi5.jpg?fit=1200%2C612&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/wi5.jpg?fit=1200%2C612&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/wi5.jpg?fit=1200%2C612&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/02\/wi5.jpg?fit=1200%2C612&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":275084,"url":"https:\/\/css-tricks.com\/css-shape-editors\/","url_meta":{"origin":395474,"position":3},"title":"CSS Shape Editors","author":"Chris Coyier","date":"August 30, 2018","format":false,"excerpt":"Firefox 62 is shipping out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon(), circle(), and ellipse(), joining Chrome and Safari. What will be nice about the Firefox release (well, it's kinda already nice if you\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/shape-outside.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/shape-outside.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/shape-outside.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/shape-outside.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/shape-outside.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":350574,"url":"https:\/\/css-tricks.com\/exploring-the-css-paint-api-blob-animation\/","url_meta":{"origin":395474,"position":4},"title":"Exploring the CSS Paint API: Blob Animation","author":"Temani Afif","date":"August 30, 2021","format":false,"excerpt":"After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those gooey shapes. But now that the powerful Paint API is available, using CSS is not\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/blob-featured-image.png?fit=1200%2C479&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/blob-featured-image.png?fit=1200%2C479&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/blob-featured-image.png?fit=1200%2C479&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/blob-featured-image.png?fit=1200%2C479&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/blob-featured-image.png?fit=1200%2C479&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":389550,"url":"https:\/\/css-tricks.com\/getting-creative-with-shape-outside\/","url_meta":{"origin":395474,"position":5},"title":"Getting Creative With shape-outside","author":"Andy Clarke","date":"October 6, 2025","format":false,"excerpt":"There are so many creative opportunities for using shape-outside that I\u2019m surprised I see it used so rarely. So, how can you use it to add personality to a design? Here\u2019s how I do it.","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/10\/s_3EDD0D53C943B8C049C7F94CCE0401810B7E10ADC9A32E2DF8EBA64F2023E651_1759072311579_2025-09-28-13.webp?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/10\/s_3EDD0D53C943B8C049C7F94CCE0401810B7E10ADC9A32E2DF8EBA64F2023E651_1759072311579_2025-09-28-13.webp?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/10\/s_3EDD0D53C943B8C049C7F94CCE0401810B7E10ADC9A32E2DF8EBA64F2023E651_1759072311579_2025-09-28-13.webp?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/10\/s_3EDD0D53C943B8C049C7F94CCE0401810B7E10ADC9A32E2DF8EBA64F2023E651_1759072311579_2025-09-28-13.webp?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/10\/s_3EDD0D53C943B8C049C7F94CCE0401810B7E10ADC9A32E2DF8EBA64F2023E651_1759072311579_2025-09-28-13.webp?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288677"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=395474"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395474\/revisions"}],"predecessor-version":[{"id":395475,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395474\/revisions\/395475"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=395474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=395474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=395474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}