How to put a waved line under misspelled words HTML

Question

I have a webpage HTML & JS.

I need to add a red waved-line under misspelled words. I got my algorithm to detect those words but I just need to know how put a waved line under those words.

Answer 1

If you don't wanna use a gif for the curly underline, you can do it by pure css:

<span style="border-bottom: 1px dotted #ff0000;padding:1px">
    <span style="border-bottom: 1px dotted #ff0000;">
        foobar
    </span>
</span>

(Or run in JSFiddle)

Answer 2

Actually you don't have a standard curly underline just by using CSS, but check this tutorial on how to create one yourself:

Taken from here: http://www.phpied.com/curly-underline/

.curly-underline {
    background: url(underline.gif) bottom repeat-x;
}