Zig Zag Border Created with CSS

  • follow us in feedly
Published February 24, 2014 by Brad Knutson
CSS Zig Zag Borders

Solid borders are so boring. With flat design being as popular as it is, solid borders are becoming the norm. Remember the days of extravagant transitions between sections and obnoxious borders? Zig zags, swirls, fading, you name it! Some liked this design trend, some didn’t – but those days are long behind us it seems.

In this article, I’d like to take you back to a time when interesting transitions between colored blocks was something every web designer strove to create. Say hello to the zig zag border!

Pretty neat looking, right? How would you go about accomplishing this? We don’t want to use Javascript or jQuery, as that just seems overkill. We could create the zig zag border as an image and add it as an element between the colored blocks…but that will create unnecessary resources (server requests for images, etc.). There is no way to create this effect with any current attributes available to the border property, so how on earth could we create it?

Here’s how.


Nothing out of the ordinary here – just 4 elements. Each colored element in the example is a unique container element.


A seasoned CSS eye will note that the “border” really isn’t a border at all, it’s a pseudo-element with a background gradient. It might seem complicated, so let’s look a little closer.

Taking a closer look, and by using a little math, we can see what is creating the small repeating triangles. The same color from each container is applied to the pseudo-element background gradient to create the zig zag affect.

The Result

That’s all there is to it! In my example above, I added a CSS drop-shadow so the zig zag borders stand out a little more. I’ll leave it up to you to include it if you so choose. The only difference between the CSS I pasted above and the CSS I’m using in the above example is a drop-shadow (only works in WebKit browsers).

So what do you think? Is this a design trend that should make a comeback, or is it something that you’re glad is behind us?

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

4 thoughts on “Zig Zag Border Created with CSS

  1. Tom Nguyen

    I like the zig zag borders, Brad. Maybe I’ll give it a go when I find some time away from doing client work or maybe I can use it in one of my client designs. Thanks for sharing.

  2. Pranav VG

    Thanks for the code.Eliminating the use of images improves page loading speed. It doesn’t work on IE (tried on IE 9)but i’ve stopped bothering about people using IE so its not an issue :)

  3. John C Havekotte

    I put your html into my CoffeeCup html editor as well as you css, and all I got was a white background with no separation between containers. In looking at the css, I can see that background {} should be background-color, but I cannot comment on the remaining css, that is why I am seeking guidance. Do you have up to date code that does work? Please let me know. Thanks. John


Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">