{"id":5733,"date":"2025-05-01T09:32:05","date_gmt":"2025-05-01T14:32:05","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5733"},"modified":"2025-05-01T09:32:38","modified_gmt":"2025-05-01T14:32:38","slug":"curved-box-cutouts-in-css","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/curved-box-cutouts-in-css\/","title":{"rendered":"Curved Box Cutouts in CSS"},"content":{"rendered":"\n<p>This post explores a trick to create the illusion of an element appended to another with a gap and curved edges at the corners. It\u2019s useful for visually demarcating supplementary elements or user controls in a card module.<\/p>\n\n\n\n<p>An example:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WbbZRYW\" src=\"\/\/codepen.io\/anon\/embed\/WbbZRYW?height=500&amp;theme-id=47434&amp;slug-hash=WbbZRYW&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WbbZRYW\" title=\"CodePen Embed WbbZRYW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-layout\">The Layout<\/h2>\n\n\n\n<p>Let\u2019s start with the HTML and code a simple design.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"outer\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"inner\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Use a nested element (<code>.inner<\/code>) or a stacked element to create the small box. The key is for the small box to <em>overlap<\/em> the larger one.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.outer<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">375px<\/span>;\n  <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: dodgerblue;\n\n  .inner {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">160px<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">60px<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: inherit;\n    <span class=\"hljs-attribute\">background<\/span>: skyblue;\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The larger square box (<code>.outer<\/code>) and the smaller rectangle box (<code>.inner<\/code>) share the same&nbsp;<code>border-radius<\/code>&nbsp;value (<code>12px<\/code>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/pLA9AZ0M-1.png?resize=1024%2C614&#038;ssl=1\" alt=\"\" class=\"wp-image-5739\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/pLA9AZ0M-1.png?resize=1024%2C614&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/pLA9AZ0M-1.png?resize=300%2C180&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/pLA9AZ0M-1.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/pLA9AZ0M-1.png?w=1384&amp;ssl=1 1384w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-smaller-box\">The Smaller Box<\/h2>\n\n\n\n<p>Add an&nbsp;<code>outline<\/code>&nbsp;of the same color as the page.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.inner<\/span> {\n  <span class=\"hljs-comment\">\/* etc. *\/<\/span>\n  <span class=\"hljs-attribute\">outline<\/span>: <span class=\"hljs-number\">8px<\/span> solid white;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>That&#8217;s all we need to do with the inner box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/HoXaRDoI.png?resize=1024%2C614&#038;ssl=1\" alt=\"\" class=\"wp-image-5740\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/HoXaRDoI.png?resize=1024%2C614&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/HoXaRDoI.png?resize=300%2C180&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/HoXaRDoI.png?resize=768%2C461&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/HoXaRDoI.png?w=1380&amp;ssl=1 1380w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-bigger-box\">The Bigger Box<\/h2>\n\n\n\n<p>Add two small&nbsp;<code>radial-gradient()<\/code>&nbsp;background images to the larger box\u2019s background.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Position the images where the smaller box\u2019s corners overlap, with a negative offset equal to the&nbsp;<em>outline<\/em>&nbsp;size (<code>8px<\/code>).<\/li>\n\n\n\n<li>The&nbsp;<em>border radius<\/em>&nbsp;(<code>12px<\/code>) plus the smaller box\u2019s&nbsp;<em>outline<\/em>&nbsp;(<code>8px<\/code>) equals the images\u2019 size (<code>20px 20px<\/code>).<\/li>\n\n\n\n<li>The&nbsp;<em>gradients<\/em>&nbsp;are transparent circles the same size as the&nbsp;<em>border radius<\/em>&nbsp;(<code>12px<\/code>), with the rest white<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.outer<\/span> {\n  <span class=\"hljs-comment\">\/* etc. *\/<\/span>\n  <span class=\"hljs-attribute\">background<\/span>: \n    -<span class=\"hljs-number\">8px<\/span> <span class=\"hljs-number\">60px<\/span> \/ <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">20px<\/span> \n        <span class=\"hljs-built_in\">radial-gradient<\/span>(circle at right bottom, transparent <span class=\"hljs-number\">12px<\/span>, white <span class=\"hljs-number\">12px<\/span>),\n    <span class=\"hljs-number\">160px<\/span> -<span class=\"hljs-number\">8px<\/span> \/ <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">20px<\/span> \n        <span class=\"hljs-built_in\">radial-gradient<\/span>(circle at right bottom, transparent <span class=\"hljs-number\">12px<\/span>, white <span class=\"hljs-number\">12px<\/span>),\n    dodgerblue;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The code is complete. You\u2019ll get the final result as is. However, let\u2019s make the code more flexible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-variables\">CSS Variables<\/h2>\n\n\n\n<p>For ease of update, I\u2019ll move the&nbsp;<em>length<\/em>&nbsp;values to CSS variables, and for clarity, I\u2019ll list each of the&nbsp;<code>background-<\/code>&nbsp;properties separately.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.outer<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">375px<\/span>;\n  <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n\n  <span class=\"hljs-comment\">\/* border radius *\/<\/span>\n  <span class=\"hljs-attribute\">--r<\/span>: <span class=\"hljs-number\">12px<\/span>;\n\n  <span class=\"hljs-comment\">\/* width, height, and outline of smaller box *\/<\/span>\n  <span class=\"hljs-attribute\">--w<\/span>: <span class=\"hljs-number\">160px<\/span>;\n  <span class=\"hljs-attribute\">--h<\/span>: <span class=\"hljs-number\">60px<\/span>;\n  <span class=\"hljs-attribute\">--o<\/span>: <span class=\"hljs-number\">8px<\/span>;\n\n  <span class=\"hljs-comment\">\/* offset and size of the radial-gradient images *\/<\/span>\n  <span class=\"hljs-attribute\">--ofs<\/span>: <span class=\"hljs-built_in\">calc<\/span>(-<span class=\"hljs-number\">1<\/span> * var(--o));\n  <span class=\"hljs-attribute\">--sz<\/span>: <span class=\"hljs-built_in\">calc<\/span>(var(--r) + <span class=\"hljs-built_in\">var<\/span>(--o));\n  <span class=\"hljs-attribute\">--img<\/span>: <span class=\"hljs-built_in\">radial-gradient<\/span>(circle at right bottom, transparent var(--r), white <span class=\"hljs-built_in\">var<\/span>(--r));\n\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-built_in\">var<\/span>(--r);\n  <span class=\"hljs-attribute\">background-image<\/span>: <span class=\"hljs-built_in\">var<\/span>(--img), <span class=\"hljs-built_in\">var<\/span>(--img);\n  <span class=\"hljs-attribute\">background-position<\/span>: <span class=\"hljs-built_in\">var<\/span>(--ofs) <span class=\"hljs-built_in\">var<\/span>(--h), <span class=\"hljs-built_in\">var<\/span>(--w) <span class=\"hljs-built_in\">var<\/span>(--ofs);\n  <span class=\"hljs-attribute\">background-size<\/span>: <span class=\"hljs-built_in\">var<\/span>(--sz) <span class=\"hljs-built_in\">var<\/span>(--sz);\n  <span class=\"hljs-attribute\">background-repeat<\/span>: no-repeat;\n  <span class=\"hljs-attribute\">background-color<\/span>: dodgerblue;\n\n  .inner {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-built_in\">var<\/span>(--w);\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-built_in\">var<\/span>(--h);\n    <span class=\"hljs-attribute\">outline<\/span>: <span class=\"hljs-built_in\">var<\/span>(--o) solid white;\n    <span class=\"hljs-attribute\">border-radius<\/span>: inherit;\n    <span class=\"hljs-attribute\">background<\/span>: skyblue;\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NPPadJm\" src=\"\/\/codepen.io\/anon\/embed\/NPPadJm?height=550&amp;theme-id=47434&amp;slug-hash=NPPadJm&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NPPadJm\" title=\"CodePen Embed NPPadJm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"all-four-corner-placements\">All Four Corner Placements<\/h2>\n\n\n\n<p>Place the smaller box in the desired corner against the bigger one, and update the&nbsp;radial gradient&nbsp;image positions and&nbsp;circles&nbsp;accordingly.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.outer<\/span> {\n  <span class=\"hljs-comment\">\/* etc. *\/<\/span>\n  <span class=\"hljs-attribute\">background-image<\/span>:\n   <span class=\"hljs-built_in\">radial-gradient<\/span>(circle at var(--cnr), transparent <span class=\"hljs-built_in\">var<\/span>(--r), white <span class=\"hljs-built_in\">var<\/span>(--r)),\n   <span class=\"hljs-built_in\">radial-gradient<\/span>(circle at var(--cnr), transparent <span class=\"hljs-built_in\">var<\/span>(--r), white <span class=\"hljs-built_in\">var<\/span>(--r)),\n   <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">45deg<\/span>, rgb(<span class=\"hljs-number\">210<\/span>, <span class=\"hljs-number\">223<\/span>, <span class=\"hljs-number\">246<\/span>), <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">51<\/span>, <span class=\"hljs-number\">134<\/span>, <span class=\"hljs-number\">242<\/span>));\n\n  &amp;:nth-of-type(1) {\n    <span class=\"hljs-attribute\">--cnr<\/span>: right bottom;\n    <span class=\"hljs-attribute\">background-position<\/span>: \n      <span class=\"hljs-built_in\">var<\/span>(--ofs) <span class=\"hljs-built_in\">var<\/span>(--h), \n      <span class=\"hljs-built_in\">var<\/span>(--w) <span class=\"hljs-built_in\">var<\/span>(--ofs), \n      <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-comment\">\/* etc. *\/<\/span>\n  }\n\n  &amp;<span class=\"hljs-selector-pseudo\">:nth-of-type(2)<\/span> {\n    <span class=\"hljs-attribute\">--cnr<\/span>: left bottom;\n    <span class=\"hljs-attribute\">background-position<\/span>: \n      <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--ofs)) <span class=\"hljs-built_in\">var<\/span>(--h), \n      <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--w)) <span class=\"hljs-built_in\">calc<\/span>(var(--ofs)), \n      <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-comment\">\/* etc. *\/<\/span>\n  }\n\n  &amp;<span class=\"hljs-selector-pseudo\">:nth-of-type(3)<\/span> {\n    <span class=\"hljs-attribute\">--cnr<\/span>: left top;\n    <span class=\"hljs-attribute\">background-position<\/span>: \n      <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--ofs)) <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--h)), \n      <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--w)) <span class=\"hljs-built_in\">calc<\/span>( <span class=\"hljs-number\">100%<\/span> - var(--ofs)), \n      <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-comment\">\/* etc. *\/<\/span>\n  }\n\n  &amp;<span class=\"hljs-selector-pseudo\">:nth-of-type(4)<\/span> {\n    <span class=\"hljs-attribute\">--cnr<\/span>: right top;\n    <span class=\"hljs-attribute\">background-position<\/span>: \n      <span class=\"hljs-built_in\">var<\/span>(--ofs) <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--h)), \n      <span class=\"hljs-built_in\">var<\/span>(--w) <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100%<\/span> - var(--ofs)), \n      <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-comment\">\/* etc. *\/<\/span>\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The larger box in the example is a square, so&nbsp;<code>100%<\/code>&nbsp;is used in calculating the&nbsp;<em>radial gradient<\/em>&nbsp;images\u2019 positions both vertically and horizontally where needed.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_EaaPMax\" src=\"\/\/codepen.io\/anon\/embed\/EaaPMax?height=550&amp;theme-id=47434&amp;slug-hash=EaaPMax&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed EaaPMax\" title=\"CodePen Embed EaaPMax\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use-the-design\">How to Use The Design?<\/h2>\n\n\n\n<p>Since the design uses an&nbsp;<em>imitation<\/em>&nbsp;of a gap, effects like drop shadow that require cutouts won\u2019t work. However, no extra markup or style changes are needed, only the background is affected, making it suitable for simple designs.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WbbZRYW\" src=\"\/\/codepen.io\/anon\/embed\/WbbZRYW?height=550&amp;theme-id=47434&amp;slug-hash=WbbZRYW&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WbbZRYW\" title=\"CodePen Embed WbbZRYW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This doesn\u2019t have to be limited to gap-like designs, either. The outline can be used in other ways, too. The rounded corners will be a subtle touch up.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.date<\/span> {\n  <span class=\"hljs-attribute\">outline<\/span>: <span class=\"hljs-built_in\">var<\/span>(--outline) solid navy;\n  <span class=\"hljs-comment\">\/* etc. *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KwwXaLP\" src=\"\/\/codepen.io\/anon\/embed\/KwwXaLP?height=550&amp;theme-id=47434&amp;slug-hash=KwwXaLP&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KwwXaLP\" title=\"CodePen Embed KwwXaLP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Kinda like that &#8220;bento box&#8221; look.<\/p>\n","protected":false},"author":20,"featured_media":5754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Curved-Box-Cutouts-in-CSS.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5733"}],"version-history":[{"count":8,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5733\/revisions"}],"predecessor-version":[{"id":5755,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5733\/revisions\/5755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5754"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}