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
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
Note: I turned one of the two wavy lines in my example, which is initially horizontal, upright using