Making Wavy or Serrated Edges with CSS


Recently, I found out about text-decoration-thickness, an addition to the set of text-decoration- properties that control text features such as underline.

We can have a wavy underline for a text with text-decoration-line: underline; and text-decoration-style: wavy;, and now with being able to control the thickness of the line as well, using text-decoration-thickness, we can make a pretty decent wavy line with just CSS 🌊

So, naturally, I tried to make a wavy line (without text) and use it in a design – like wavy edges. You can see the following demo in full page view in codepen here.

For the above design, I made two black wavy lines and placed each over two adjacent edges of the image.

I used pseudo-elements to create the wavy lines. You can use any block-level element you want. All you have to do is give that element a wavy text-decoration style with line-height: 0;.

The length of the wavy line is assigned using the CSS property, word-spacing, so add that to the element, too.

text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: black;
text-decoration-thickness: 3px;
line-height: 0;
word-spacing: 352px;

Browsers don’t render the wavy lines the same way at the moment, so make browser-specific tweaks to the size and positioning of the lines if you need to. I did it for Firefox, you can see that in my code. I also added a check for fallback code. All in CSS, using @supports.

Note: I turned one of the two wavy lines in my example, which is initially horizontal, upright using writing-mode: vertical-lr;

The Author

Web developer and writer. @rpsthecoder in Twitter.