{"id":362018,"date":"2022-01-26T06:26:49","date_gmt":"2022-01-26T14:26:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=362018"},"modified":"2023-01-31T12:26:52","modified_gmt":"2023-01-31T20:26:52","slug":"css-borders-using-masks","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-borders-using-masks\/","title":{"rendered":"Fancy\u00a0CSS Borders Using Masks\u00a0(Zig-Zag,\u00a0Wavy, and More)"},"content":{"rendered":"\n<p>Have you ever tried to make CSS borders in a repeating zig-zag pattern? Like where a colored section of a website ends and another differently colored section begins \u2014 not with a straight line, but angled zig zags, rounded humps, or waves. There are a number of ways you could do this sort of CSS border, dating all the way back to using a <code>background-image<\/code>. But we can get more modern and programmatic with it. In this article, we\u2019ll look at some modern CSS mask techniques to achieve the look.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Before we dig into the technical parts, though, let\u2019s take a look at what we are building. I have made a <a href=\"https:\/\/css-generators.com\/custom-borders\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS border generator<\/a> where you can easily generate any kind of border within a few seconds and get the CSS code.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='207' src='https:\/\/videopress.com\/embed\/KzpD7MM6?cover=1&amp;muted=1&amp;persistVolume=0&amp;playsinline=1&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>Did you see that? With the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/\">CSS <code>mask<\/code> property<\/a> and a few <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-css-gradients\/\">CSS gradients<\/a>, we get a responsive and cool-looking border \u2014 all with CSS by itself. Not only this, but such effect can be applied to any element where we can have any kind of coloration (e.g. image, gradient, etc). We get all this without extra elements, pseudo elements, or magic numbers coming from nowhere!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Oh great! All I have to do is to copy\/paste code and it\u2019s done!<\/p>\n<\/blockquote>\n\n\n\n<p>True, but it\u2019s good to understand the logic to be able to manually adjust the code if you need to.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"masking-things\">Masking things<\/h3>\n\n\n<p>Since all our effects rely on the CSS <code>mask<\/code> property, let\u2019s take a quick refresh on how it works. Straight from <a href=\"https:\/\/drafts.fxtf.org\/css-masking\/#masking\" rel=\"noopener\">the spec<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The effect of applying a mask to a graphical object is as if the graphical object will be painted onto the background through a mask, thus completely or partially masking out parts of the graphical object.<\/p>\n<\/blockquote>\n\n\n\n<p>If we check the <a href=\"https:\/\/drafts.fxtf.org\/css-masking\/#the-mask-image\" rel=\"noopener\">formal syntax<\/a> of the <code>mask<\/code> property we can see it accepts an <code>&lt;image&gt;<\/code> as a value, meaning either a URL of an image or a color gradient. Gradients are what we\u2019ll be using here. Let\u2019s start with basic examples:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYGMjmO\" src=\"\/\/codepen.io\/anon\/embed\/eYGMjmO?height=300&amp;theme-id=1&amp;slug-hash=eYGMjmO&amp;default-tab=result\" height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYGMjmO\" title=\"CodePen Embed eYGMjmO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In the first example of this demo, a gradient is used to make it appear as though the image is fading away. The second example, meanwhile, also uses a gradient, but rather than a soft transition between colors, a <a href=\"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/hard-stop-gradients\/\">hard color stop<\/a> is used to hide (or mask) half of the image. That second example illustrates the technique we will be using to create our fancy borders.<\/p>\n\n\n\n<p>Oh, and the CSS <code>mask<\/code> property can take multiple gradients as long as they are comma-separated. That means we have even more control to mask additional parts of the image.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJxvwVZ\" src=\"\/\/codepen.io\/anon\/embed\/OJxvwVZ?height=300&amp;theme-id=1&amp;slug-hash=OJxvwVZ&amp;default-tab=result\" height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJxvwVZ\" title=\"CodePen Embed OJxvwVZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That example showing multiple masking gradients may look a bit tricky at first glance, but what\u2019s happening is the same as applying the multiple gradients on the <code>background<\/code> property. But instead of using a color that blends in with the page background, we use a \u201ctransparent\u201d black value (<code>#0000<\/code>) for the hidden parts of the image and full black (<code>#000<\/code>) for the visible parts.<\/p>\n\n\n\n<p>That\u2019s it! Now we can tackle our fancy borders.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"zigzag-css-borders\">Zig-Zag CSS borders<\/h3>\n\n\n<p>As we saw in the video at the start of this article, <a href=\"https:\/\/css-generators.com\/custom-borders\/\" target=\"_blank\" rel=\"noreferrer noopener\">the generator<\/a> can apply borders on one side, two sides, or all sides. Let\u2019s start with the bottom side using a step-by-step illustration:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNGqMQE\" src=\"\/\/codepen.io\/anon\/embed\/oNGqMQE?height=510&amp;theme-id=1&amp;slug-hash=oNGqMQE&amp;default-tab=result\" height=\"510\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNGqMQE\" title=\"CodePen Embed oNGqMQE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"461\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/conic-gradient-illustration.png?resize=963%2C461&#038;ssl=1\" alt=\"\" class=\"wp-image-372448\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/conic-gradient-illustration.png?w=963&amp;ssl=1 963w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/conic-gradient-illustration.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/conic-gradient-illustration.png?resize=768%2C368&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<ol>\n<li>We start by adding a <code>conic-gradient()<\/code> with a specific dimension placed in the middle.<\/li>\n\n\n\n<li>Next, we repeat that gradient (by removing <code>no-repeat<\/code> ) and we already see the zig-zag shape!<\/li>\n\n\n\n<li>Gradients are known to have anti-aliasing issues creating jagged edges (especially on Chrome). To avoid this, we add a slight transition between the colors, changing <code>blue 90deg, green 0<\/code> to <code>green, blue 1deg 89deg, green 90deg<\/code>.<\/li>\n\n\n\n<li>Last, we use everything inside the <code>mask<\/code> property! <\/li>\n<\/ol>\n\n\n\n<p>We can extract two variables from those steps to define our shape: size (<code>40px<\/code>) and angle (<code>90deg<\/code>). Here\u2019s how we can express that using placeholders for those variables. I will be using JavaScript to replace those variables with their final values.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask:\n  conic-gradient(\n    from {-angle\/2} at bottom,\n    #0000, #000 1deg {angle - 1} ,#0000 {angle}\n  ) 50%\/{2*size*tan(angle\/2)} 100%;<\/code><\/pre>\n\n\n\n<p>We can use CSS custom properties for the size and the angle, but trigonometric functions are unsupported features at this moment. In the future, we\u2019ll be able to do something like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--size: 40px;\n--angle: 90deg;\nmask:\n  conic-gradient(\n    from calc(var(--angle)\/-2) at bottom,\n    #0000, #000 1deg calc(var(--angle) - 1deg), #0000 var(--angle)\n  ) 50%\/calc(2*var(--size)*tan(var(--angle)\/2)) 100%;<\/code><\/pre>\n\n\n\n<p>Similar to the bottom border, the top one will have almost the same code with a few adjustments:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"3\"><code markup=\"tt\">mask:\n  conic-gradient(\n    from {180deg - angle\/2} at top,\n    #0000, #000 1deg {angle - 1}, #0000 {angle}\n  ) 50%\/{2*size*tan(angle\/2)} 100%;<\/code><\/pre>\n\n\n\n<p>We changed <code>bottom<\/code> with <code>top<\/code>, then updated the rotation of the gradient to <code>180deg - angle\/2<\/code> instead of <code>-angle\/2<\/code>. As simple as that!<\/p>\n\n\n\n<p>That\u2019s the pattern we can use for the rest of the sides, like the left:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask:\n  conic-gradient(\n    from {90deg - angle\/2} at left,\n    #0000, #000 1deg {angle - 1}, #0000 {angle}\n  ) 50%\/100% {2*size*tan(angle\/2)};<\/code><\/pre>\n\n\n\n<p>\u2026and the right:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask:\n  conic-gradient(\n    from {-90deg - angle\/2} at right,\n    #0000, #000 1deg {angle - 1}, #0000 {angle}\n  ) 50%\/100% {2*size*tan(angle\/2)};<\/code><\/pre>\n\n\n\n<p>Let\u2019s make the borders for when they\u2019re applied to two sides at once. We can actually reuse the same code. To get both the top and bottom borders, we simply combine the code of both the top and bottom border.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask:\n  conic-gradient(\n    from {-angle\/2} at bottom,\n    #0000, #000 1deg {angle - 1}, #0000 {angle}\n  ) bottom\/{2*size*tan(angle\/2)} 51% repeat-x;\n  conic-gradient(\n    from {180deg - angle\/2} at top, \n    #0000, #000 1deg {angle - 1}, #0000 {angle}\n  ) top   \/{2*size*tan(angle\/2)} 51% repeat-x;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWaYOOM\" src=\"\/\/codepen.io\/anon\/embed\/NWaYOOM?height=450&amp;theme-id=1&amp;slug-hash=NWaYOOM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWaYOOM\" title=\"CodePen Embed NWaYOOM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The same goes when applying borders to the left and right sides together:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask:\n  conic-gradient(\n    from {90deg - angle\/2} at left,\n    #0000, #000 1deg {angle - 1}, #0000 {angle}\n  ) left \/51% {2*size*tan(angle\/2)} repeat-y,\n  conic-gradient(\n    from {-90deg - angle\/2} at right,\n    #0000, #000 1deg {angle - 1}, #0000 {angle}\n  ) right\/51% {2*size*tan(angle\/2)} repeat-y;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWEVPxx\" src=\"\/\/codepen.io\/anon\/embed\/MWEVPxx?height=400&amp;theme-id=1&amp;slug-hash=MWEVPxx&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWEVPxx\" title=\"CodePen Embed MWEVPxx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>So, if we want to apply borders to all of the sides at once, we add all the gradients together, right?<\/p>\n<\/blockquote>\n\n\n\n<p>Exactly! We have four conic gradients (one on each side) and one <code>linear-gradient()<\/code> in the middle. We set a fixed angle equal to <code>90deg<\/code> because it the only one that results in nicer corners without weird overlapping. Note that I\u2019m also using <code>space<\/code> instead of <code>repeat-x<\/code> or <code>repeat-y<\/code> to avoid bad result on corners like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYzavXq\" src=\"\/\/codepen.io\/anon\/embed\/LYzavXq?height=500&amp;theme-id=1&amp;slug-hash=LYzavXq&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYzavXq\" title=\"CodePen Embed LYzavXq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='267' src='https:\/\/videopress.com\/embed\/VYDliPCk?cover=1&amp;controls=0&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><figcaption>Resizing a container with four sides configuration<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"scooped-css-borders\">Scooped CSS borders<\/h3>\n\n\n<p>Now let\u2019s tackle scooped borders!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Oh no! another long explanation with a lot of calculation?!<\/p>\n<\/blockquote>\n\n\n\n<p>Not at all! There is nothing to explain here. We take everything from the zig-zag example and update the <code>conic-gradient()<\/code> with a <code>radial-gradient()<\/code>. It\u2019s even easier because we don\u2019t have any angles to deal with \u2014 only the size variable.<\/p>\n\n\n\n<p>Here is an illustration for one side to see how little we need to do to switch from the zig-zag border to the scooped border:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BawxaKV\" src=\"\/\/codepen.io\/anon\/embed\/BawxaKV?height=600&amp;theme-id=1&amp;slug-hash=BawxaKV&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BawxaKV\" title=\"CodePen Embed BawxaKV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Again, all I did there was replace the <code>conic-gradient()<\/code> with this (using placeholders for size):<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask: radial-gradient({size} at bottom,#0000 98%,#000) 50% \/ {1.85*size} 100%;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"790\" height=\"471\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/overview-of-scooped-border.png?resize=790%2C471&#038;ssl=1\" alt=\"\" class=\"wp-image-372459\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/overview-of-scooped-border.png?w=790&amp;ssl=1 790w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/overview-of-scooped-border.png?resize=300%2C179&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/overview-of-scooped-border.png?resize=768%2C458&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>What is the logic behind the magic numbers 1.85 and 98%?<\/p>\n<\/blockquote>\n\n\n\n<p>Logically, we should use <code>100%<\/code> instead of <code>98%<\/code> to have a circle that touches the edges of the background area; but again, it\u2019s the anti-aliasing issue and those jagged edges. We use a slightly smaller value to prevent weird overlapping.<\/p>\n\n\n\n<p>The <code>1.85<\/code> value is more of a personal preference than anything. I initially used <code>2<\/code> which is the logical value to get a perfect circle, but the result doesn&#8217;t look quite as nice, so the smaller value creates a more seamless overlap between the circles.<\/p>\n\n\n\n<p>Here\u2019s the difference:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNGvNzO\" src=\"\/\/codepen.io\/anon\/embed\/rNGvNzO?height=400&amp;theme-id=1&amp;slug-hash=rNGvNzO&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNGvNzO\" title=\"CodePen Embed rNGvNzO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now we need to replicate this for the rest of the sides, just as we did with the zig-zag CSS border, and guess what? We also need one gradient even for the case where we want to have the top\/bottom or left\/right version.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvmxgNa\" src=\"\/\/codepen.io\/anon\/embed\/wvmxgNa?height=350&amp;theme-id=1&amp;slug-hash=wvmxgNa&amp;default-tab=css,result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvmxgNa\" title=\"CodePen Embed wvmxgNa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The only case where we need more than one gradient is the all sides configuration. Similar to the zig-zag border, We have to use four radial gradients and one linear gradient, but I had to introduce the CSS <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/clip-path\/\"><code>clip-path<\/code><\/a> property to correct an overlapping issue at the corners. You can see the difference between with and without <code>clip-path<\/code> in the following demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoJewpM\" src=\"\/\/codepen.io\/anon\/embed\/PoJewpM?height=300&amp;theme-id=1&amp;slug-hash=PoJewpM&amp;default-tab=result\" height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoJewpM\" title=\"CodePen Embed PoJewpM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s an eight-point path to cut the corners:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">clip-path: polygon(\n   {2*size} 0,calc(100% - {2*size}) 0,\n   100% {2*size},100% calc(100% - {2*size}),\n   calc(100% - {2*size}) 100%,{2*size} 100%,\n   0 calc(100% - {2*size}),0 {2*size}\n);<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"scalloped-css-borders\">Scalloped CSS borders<\/h3>\n\n\n<p>For this border, we always need two gradients whatever the sides configuration. We use a radial gradient to create a repeated pattern of circles and a linear gradient to cover them and show only the sides we want.<\/p>\n\n\n\n<p>Here is a demo to illustrate some of the cases:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEXoEVW\" src=\"\/\/codepen.io\/anon\/embed\/ZEXoEVW?height=600&amp;theme-id=1&amp;slug-hash=ZEXoEVW&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEXoEVW\" title=\"CodePen Embed ZEXoEVW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Note how I\u2019m using the <code>round<\/code> and <code>space<\/code> values. That\u2019s to make sure we don&#8217;t cut off any of the circles and also avoid relying on more gradients. And, again, that <code>1.85<\/code> value is a personal preference value.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"wavy-css-borders\">Wavy CSS borders<\/h3>\n\n\n<p>The wavy border is a kind of combination of the two previous borders. Here is an illustration to understand how we build the bottom wave.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"947\" height=\"545\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/wavy-border-illustration.png?resize=947%2C545&#038;ssl=1\" alt=\"\" class=\"wp-image-372457\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/wavy-border-illustration.png?w=947&amp;ssl=1 947w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/wavy-border-illustration.png?resize=300%2C173&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/wavy-border-illustration.png?resize=768%2C442&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We repeat that shape at the bottom and we are done. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNYNdqv\" src=\"\/\/codepen.io\/anon\/embed\/rNYNdqv?height=380&amp;theme-id=1&amp;slug-hash=rNYNdqv&amp;default-tab=result\" height=\"380\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNYNdqv\" title=\"CodePen Embed rNYNdqv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask: \n  radial-gradient({size} at 75% 100%,#0000 98%,#000) 50% calc(100% - {size})\/{4*size} 100% repeat-x,\n  radial-gradient({size} at 25% 50% ,#000 99%,#0000 101%) bottom\/{4*size} {2*size} repeat-x;<\/code><\/pre>\n\n\n\n<p>We do the same process for the other sides as we did with the zig-zag and rounded CSS borders. All we need is to update a few variables to have a different wave for each side.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1003\" height=\"547\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/all-sides-wavy-border.png?resize=1003%2C547&#038;ssl=1\" alt=\"\" class=\"wp-image-372458\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/all-sides-wavy-border.png?w=1003&amp;ssl=1 1003w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/all-sides-wavy-border.png?resize=300%2C164&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/all-sides-wavy-border.png?resize=768%2C419&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">Showing part of the CSS for each side.&nbsp;You can find the full code&nbsp;over at&nbsp;<a target=\"_blank\" href=\"https:\/\/css-generators.com\/custom-borders\/\" rel=\"noreferrer noopener\">the generator<\/a>.<\/figcaption><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>What about applying a wavy CSS border on all four sides? Will we have 8 gradients in total??\u201d<\/p>\n<\/blockquote>\n\n\n\n<p>Nope, and that\u2019s because there is no demo where a wavy border is applied to all four sides. I was unable to find a combination of gradients that gives a good result on the corners. Maybe someone reading this knows a good approach? &#x1f609;<\/p>\n\n\n\n<p>What we have done here is a simple case of a wavy border. I have <a href=\"https:\/\/css-tricks.com\/how-to-create-wavy-shapes-patterns-in-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">another article<\/a> where I go into fine detail about creating complex wavy shapes.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"thats-borderline-great-stuff\">That\u2019s <em>border<\/em>line great stuff!<\/h3>\n\n\n<p>So, you know the ins and outs of <a href=\"https:\/\/css-generators.com\/custom-borders\/\" target=\"_blank\" rel=\"noreferrer noopener\">my cool little online CSS border generator<\/a>! Sure, you can use the code it spits out and do just fine \u2014 but now you have the secret sauce recipe that makes it work.<\/p>\n\n\n\n<p>Specifically, we saw how gradients can be used to mask portions of an element. Then we went to work on <em>multiple<\/em> gradients to make certain shapes from those gradient CSS masks. And the result is a pattern that can be used along the edges of an element, creating the appearance of fancy borders that you might otherwise result to <code>background-image<\/code> for. Only this way, all it takes is swapping out some values to change the appearance rather than replace an entire raster image file or something.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever tried to make CSS borders in a repeating zig-zag pattern? Like where a colored section of a website ends and another differently colored section begins \u2014 not with a straight line, but angled zig zags, rounded humps, or waves. There are a number of ways you could do this sort of CSS [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":362062,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"If you're looking for interesting borders that go beyond the normal `border-style` options, @ChallengesCss has some neat masking approaches that'll do the trick.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[4953,1027,1298],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fancy-borders.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":365946,"url":"https:\/\/css-tricks.com\/css-hover-effects-background-masks-3d\/","url_meta":{"origin":362018,"position":0},"title":"Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D","date":"May 26, 2022","format":false,"excerpt":"We\u2019ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn\u2019t use any shadows. We also combined them with CSS variables and calc()\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":326412,"url":"https:\/\/css-tricks.com\/how-to-add-text-in-borders-using-basic-html-elements\/","url_meta":{"origin":362018,"position":1},"title":"How to Add Text in Borders Using Basic HTML Elements","date":"December 1, 2020","format":false,"excerpt":"Some HTML elements come with preset designs, like the inconveniently small squares of <input type=\"checkbox\"> elements, the limited-color bars of <meter> elements, and the \u201csomething about them bothers me\u201d arrows of the <details> elements. We can style them to match the modern aesthetics of our websites while making use of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/border-text-fieldset-legend.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372396,"url":"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-2\/","url_meta":{"origin":362018,"position":2},"title":"CSS Grid and Custom Shapes, Part 2","date":"August 22, 2022","format":false,"excerpt":"Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes. Here's just one of the fantastic grids we made together: CodePen Embed Fallback CSS Grid and Custom Shapes series Part 1Part 2\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/zig-zag-panel.png?fit=1104%2C492&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":318708,"url":"https:\/\/css-tricks.com\/more-control-over-css-borders-with-background-image\/","url_meta":{"origin":362018,"position":3},"title":"More Control Over CSS Borders With background-image","date":"August 7, 2020","format":false,"excerpt":"You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; border: 3px dotted red; } You don't have all that much control over how big or long the dashes or gaps are. And you certainly can't give the dashes slants, fading, or\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/background-borders.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351034,"url":"https:\/\/css-tricks.com\/fun-times-styling-checkbox-states\/","url_meta":{"origin":362018,"position":4},"title":"Fun Times Styling Checkbox States","date":"September 10, 2021","format":false,"excerpt":"We might leave a text input unstyled. We might leave a link unstyled. Even a button. But checkboxes\u2026 we don\u2019t leave them alone. That\u2019s why styling checkboxes never gets old. Although designing checkboxes is not that complicated, we also don\u2019t have to settle for simple background color changes, or adding\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/fun-checkboxes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334074,"url":"https:\/\/css-tricks.com\/animating-a-css-gradient-border\/","url_meta":{"origin":362018,"position":5},"title":"Animating a CSS Gradient Border","date":"February 8, 2021","format":false,"excerpt":"This little trick for gradient borders is super useful: .border-gradient { border: 5px solid; border-image-slice: 1; border-image-source: linear-gradient(to left, #743ad5, #d53a9d); } Here's some basic demos from our article on the subject. Sephanie Eckles was sharing around the idea with more detail. Bramus Van Damme saw that and stretched it\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/gradient-borders-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fancy-borders.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362018"}],"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\/281881"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=362018"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362018\/revisions"}],"predecessor-version":[{"id":376948,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/362018\/revisions\/376948"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/362062"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=362018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=362018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=362018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}