Making Wavy or Serrated Edges with CSS

Making Wavy or Serrated Edges with CSS preethisam.com3 months ago in #Dev Love37

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. 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 AuthorPreethi Web developer and writer. @rpsthecoder in Twitter.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply