{"id":28703,"date":"2016-12-12T23:01:09","date_gmt":"2016-12-12T15:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28703"},"modified":"2025-04-03T23:45:40","modified_gmt":"2025-04-03T15:45:40","slug":"css-cutout-border","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/","title":{"rendered":"How to Create a Cut-out Border Design with CSS"},"content":{"rendered":"<p>With a <strong>cut-out border design<\/strong> we can show to users what can be found <strong>underneath the border area of an HTML element<\/strong>. This task is typically solved by <strong>stacking two or more block elements<\/strong> (in most cases divs) <strong>of different sizes<\/strong> on top of each other. First this seems an effortless solution, but it gets more frustrating when you want to reuse the layout multiple times, move around the elements, optimize the design for mobile, or maintain the code.<\/p>\n<p>In this post, I\u2019m going to show you an elegant CSS-only solution that uses <strong>only one HTML element<\/strong> to achieve the same effect. This technique is also great for accessibility, as it <strong>loads the background image in the CSS<\/strong>, separated from the HTML.<\/p>\n<p>By the end of this post, you\u2019ll know how to <strong>display a background image in the border area<\/strong> in order to create the <strong>cut-out border design<\/strong> you can see below. I\u2019ll also show how you can make the design responsive <strong>using viewport units<\/strong>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-gradient-border\/\">CSS Gradient Border Colors<\/a>\n\t\t\t\t<\/p>\n<p><iframe height=\"420\" scrolling=\"no\" title=\"CSS Cutout Border\" src=\"https:\/\/codepen.io\/\/hkdc\/embed\/preview\/bBogBz\/?height=420&theme-id=0&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/hkdc\/pen\/bBogBz\/\" rel=\"nofollow\">CSS Cutout Border<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<h2>Initial Code<\/h2>\n<p>The only requirement in the HTML front is a <strong>block element<\/strong>:<\/p>\n<pre>\r\n&lt;div class=\"cb\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>We\u2019ll need to <strong>reuse<\/strong> the dimensions (width & height) and border width values of the <code>div<\/code>, so I\u2019m introducing them <strong>as CSS variables<\/strong>. The variable <code>--w<\/code> denotes the <strong>width<\/strong> of the <code>.cb<\/code> block element, <code>--h<\/code> indicates its <strong>height<\/strong>, <code>--b<\/code> goes for the <strong>border width<\/strong>, and <code>--b2<\/code> for the border width multiplied by 2. We\u2019ll later see the use of the last variable.<\/p>\n<p>I\u2019m sizing the <code>&lt;div&gt;<\/code> <strong>relatively to the width of the viewport<\/strong>, hence the use of the <code>vw<\/code> unit (you can use fixed units if you want).<\/p>\n<pre>\r\n.cb {\r\n  --w: 35vw;\r\n  --h: 40vw;\r\n  --b: 4vw;\r\n  --b2: calc(var(--b) * 2);\r\n}\r\n<\/pre>\n<h3>Quick explanation \u2013 <code>vw<\/code> and <code>vh<\/code> units<\/h3>\n<p>The unit <code>vw<\/code> represents the <strong>1\/100<sup>th<\/sup> of the width of the viewport<\/strong>. For instance, <code>50vw<\/code> is 50 parts of a viewport width <strong>sliced vertically into 100 equal parts<\/strong>, while <code>50vh<\/code> is 50 parts of a viewport height <strong>sliced horizontally into 100 equal parts<\/strong>.<\/p>\n<p>Let\u2019s improve the above code by adding a background, and setting the border, height and width <strong>by using our predefined CSS variables<\/strong>.<\/p>\n<pre>\r\n.cb {\r\n  --w: 35vw;\r\n  --h: 40vw;\r\n  --b: 4vw;\r\n  --b2: calc(var(--b) * 2);\r\n  background: url(bg.jpg);\r\n  border: var(--b) solid transparent;\r\n  height: var(--h);\r\n  width: var(--w);\r\n}\r\n<\/pre>\n<p>Here\u2019s how the demo is supposed to look like right now:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgi.jpg\" alt=\"box with background image\" width=\"800\" height=\"541\"><\/figure>\n<h2>Size the background image<\/h2>\n<p>We need the background image to <strong>cover the whole area of the <code>&lt;div&gt;<\/code> including the border area<\/strong>, so the background image needs to be <strong>sized accordingly<\/strong>.<\/p>\n<p>If you want to give the background image a fixed size, just make sure the size you\u2019re giving enables it to cover the border area of the <code>&lt;div&gt;<\/code> as well. As for the code used in the post so far, here\u2019s the <code>background<\/code> value I\u2019m giving it:<\/p>\n<pre>\r\n.cb {\r\n  --w: 35vw;\r\n  --h: 40vw;\r\n  --b: 4vw;\r\n  --b2: calc(var(--b) * 2);\r\n  background: url(bg.jpg) center\/calc(var(--w) + var(--b2))\r\n      calc(var(--h) + var(--b2));\r\n  border: var(--b) solid transparent;\r\n  height: var(--h);\r\n  width: var(--w);\r\n}\r\n<\/pre>\n<p>The <strong>width of the background image<\/strong> [<code>calc(var(--w) + var(--b2))<\/code>] is the sum of the <strong>width of the div<\/strong> [<code>var(--w)<\/code>] and the <strong>width of the left & right borders<\/strong> [<code>var(--b2)<\/code>].<\/p>\n<p>Similarly, the <strong>height of the background image<\/strong> [<code>calc(var(--h) + var(--b2))<\/code>] is the sum of the <strong>height of the div<\/strong> [<code>var(--h)<\/code>] and the <strong>width of the top & bottom borders<\/strong> [<code>var(--b2)<\/code>].<\/p>\n<p>This way, we\u2019ve sized the background image to an area that is same to the size of the <code>div<\/code> <strong>(including the border area)<\/strong>.<\/p>\n<p>The <code>center<\/code> keyword <strong>aligns the background image<\/strong> to the centre of the <code>div<\/code>.<\/p>\n<p><strong>Note:<\/strong> If you\u2019re adding padding to the <code>div<\/code>, remember to <strong>include the padding area<\/strong> to the background size as well, same as the border area.<\/p>\n<p>This is what we have right now:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgp.jpg\" alt=\"box with background image\" width=\"800\" height=\"558\"><\/figure>\n<h2>Cover the border-exclusive area<\/h2>\n<p>Now that we\u2019ve covered the border-inclusive area with the background image, all that remains is to <strong>cover the center area inside of the border<\/strong> (border-exclusive area) with a solid color, for which we reach for a <strong><code>box-shadow<\/code> inset<\/strong>.<\/p>\n<pre>\r\n.cb {\r\n  --w: 35vw;\r\n  --h: 40vw;\r\n  --b: 4vw;\r\n  --b2: calc(var(--b) * 2);\r\n  background: url(bg.jpg) center\/calc(var(--w) + var(--b2))\r\n      calc(var(--h) + var(--b2));\r\n  border: var(--b) solid transparent;\r\n  box-shadow: inset var(--w) 0 0 rgba(0,120,237,.5);\r\n  height: var(--h);\r\n  width: var(--w);\r\n}\r\n<\/pre>\n<p>The horizontal shadow with value <code>var(--w)<\/code> <strong>covers the entire width of the <code>div<\/code><\/strong>. The use of <code>rgba<\/code> color function allows <strong>some transparency<\/strong> to be added in the mix, however you can also use an opaque color if you want to fully cover the center area.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bxs.jpg\" alt=\"box with background image\" width=\"800\" height=\"592\"><\/figure>\n<h2>Add an extra border with <code>box-shadow<\/code><\/h2>\n<p>In the Codepen demo, you could see a white border around the image. There\u2019s a famous trick of <strong>using box-shadows to create multiple borders<\/strong>\u2014we can use the same technique to <strong>add one or more solid colored borders<\/strong> to our design.<\/p>\n<p>The updated <code>box-shadow<\/code> value is:<\/p>\n<pre>\r\n.cb {\r\n--w: 35vw;\r\n--h: 40vw;\r\n--b: 4vw;\r\n--b2: calc(var(--b) * 2);\r\nbackground: url(bg.jpg) center\/calc(var(--w) + var(--b2))\r\n    calc(var(--h) + var(--b2));\r\nborder: var(--b) solid transparent;\r\nbox-shadow: inset var(--w) 0 0 rgba(0,120,237,.5),\r\n    0 0 0 calc(var(--b) \/ 2) white;\r\nheight: var(--h);\r\nwidth: var(--w);\r\n}\r\n<\/pre>\n<p>The <code>calc(var(--b) \/ 2)<\/code> function creates a shadow of the <strong>half of the border width<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgb.jpg\" alt=\"box with box shadow\" width=\"800\" height=\"581\"><\/figure>\n<h2>Optional: Separate layout & aesthetics<\/h2>\n<p>In my final Codepen demo, I\u2019ve placed the code for the background image and the box-shadow color <strong>into a separate class<\/strong>. This is <strong>optional<\/strong>, but can be extremely useful if you want to <strong>reuse the layout of the cut-out border design<\/strong> in multiple elements, and add the aesthetics (background image + color) for each element independently.<\/p>\n<p>I have added a class named <code>.poster1<\/code> to the <code>&lt;div&gt;<\/code> to achieve this goal.<\/p>\n<pre>\r\n.poster1 {\r\n  --tbgc: rgba(0,120,237,.5);\r\n  background-image: url(\"https:\/\/bitly.com\/2eQBij2\");\r\n}\r\n<\/pre>\n<p>Since <code>background<\/code> is a shorthand property, <strong>its longhand properties can be overridden\/set individually<\/strong>. Hence, we can set <code>background-image<\/code> in <code>.poster1<\/code>, and remove the url value from the <code>background<\/code> property in <code>.cb<\/code>.<\/p>\n<p>To set the value of the <code>box-shadow<\/code>, we can use <strong>another CSS variable<\/strong>. The <code>--tbgc<\/code> variable <strong>holds the color value<\/strong> we want to give to the box-shadow (lightblue in the demo), so among the style rules for <code>.cb<\/code> we <strong>replace the color value of the <code>box-shadow<\/code> property with <code>var(--tbgc)<\/code><\/strong>.<\/p>\n<pre>\r\n.cb {\r\n  --w: 35vw;\r\n  --h: 40vw;\r\n  --b: 4vw;\r\n  --b2: calc(var(--b) * 2);\r\n  background: center\/calc(var(--w) + var(--b2))\r\n      calc(var(--h) + var(--b2));\r\n  border: var(--b) solid transparent;\r\n  box-shadow: inset var(--w) 0 0 var(--tbgc),\r\n      0 0 0 calc(var(--b) \/ 2) white;\r\n  height: var(--h);\r\n  width: var(--w);\r\n}\r\n<\/pre>\n<h2>Code for portrait mode<\/h2>\n<p>Since the dimensions are all in the unit <code>vw<\/code>, it will <strong>look too small<\/strong> when you\u2019re viewing the design in portrait mode (smaller width relative to the height)\u2014which all mobile devices are in by default. To solve this issue, <strong>switch <code>vw<\/code> with <code>vh<\/code><\/strong>, and <strong>resize the design<\/strong> as you see fit for portrait modes.<\/p>\n<pre>\r\n@media (orientation: portrait) {\r\n  .cb {\r\n      --w: 35vh;\r\n      --h: 40vh;\r\n      --b: 4vh;\r\n  }\r\n}\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-v.jpg\" alt=\"code for portrait mode\" width=\"800\" height=\"404\"><\/figure>\n<p><strong>Note:<\/strong> Don\u2019t forget to <strong>add the viewport meta tag<\/strong> to your HTML page if you\u2019ve decided to optimize it for mobile view.<\/p>","protected":false},"excerpt":{"rendered":"<p>With a cut-out border design we can show to users what can be found underneath the border area of an HTML element. This task is typically solved by stacking two or more block elements (in most cases divs) of different sizes on top of each other. First this seems an effortless solution, but it gets&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Cut-out Border Design with CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"With a cut-out border design we can show to users what can be found underneath the border area of an HTML element. This task is typically solved by\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Cut-out Border Design with CSS\" \/>\n<meta property=\"og:description\" content=\"With a cut-out border design we can show to users what can be found underneath the border area of an HTML element. This task is typically solved by\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-12T15:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T15:45:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgi.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Create a Cut-out Border Design with CSS\",\"datePublished\":\"2016-12-12T15:01:09+00:00\",\"dateModified\":\"2025-04-03T15:45:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/\"},\"wordCount\":929,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-cutout-border\\\/cutout-border-bgi.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/\",\"name\":\"How to Create a Cut-out Border Design with CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-cutout-border\\\/cutout-border-bgi.jpg\",\"datePublished\":\"2016-12-12T15:01:09+00:00\",\"dateModified\":\"2025-04-03T15:45:40+00:00\",\"description\":\"With a cut-out border design we can show to users what can be found underneath the border area of an HTML element. This task is typically solved by\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-cutout-border\\\/cutout-border-bgi.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-cutout-border\\\/cutout-border-bgi.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-cutout-border\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Cut-out Border Design with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Cut-out Border Design with CSS - Hongkiat","description":"With a cut-out border design we can show to users what can be found underneath the border area of an HTML element. This task is typically solved by","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Cut-out Border Design with CSS","og_description":"With a cut-out border design we can show to users what can be found underneath the border area of an HTML element. This task is typically solved by","og_url":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-12-12T15:01:09+00:00","article_modified_time":"2025-04-03T15:45:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgi.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Create a Cut-out Border Design with CSS","datePublished":"2016-12-12T15:01:09+00:00","dateModified":"2025-04-03T15:45:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/"},"wordCount":929,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgi.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/","url":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/","name":"How to Create a Cut-out Border Design with CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgi.jpg","datePublished":"2016-12-12T15:01:09+00:00","dateModified":"2025-04-03T15:45:40+00:00","description":"With a cut-out border design we can show to users what can be found underneath the border area of an HTML element. This task is typically solved by","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgi.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-cutout-border\/cutout-border-bgi.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-cutout-border\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Cut-out Border Design with CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7sX","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28703"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28703\/revisions"}],"predecessor-version":[{"id":73468,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28703\/revisions\/73468"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28703"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}