Zig Zag Border Created with CSS


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?