CSS gradient to produce dotted line

Question

I needed to print a textearea content (user input) and I just used css gradient to produce lines below the text. The following css did the trick for me.

.linedText {
color: #000000;
line-height: 24px;

background-color: #ffffff;
background: -webkit-gradient(linear, 2% 2%, 2% 100%, from(#000000), color-stop(1%, #ffffff)) 0 -2px;
background: -webkit-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -ms-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -o-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;

-webkit-background-size: 100% 24px;
-moz-background-size: 100% 24px;
-ms-background-size: 100% 24px;
-o-background-size: 100% 24px;
background-size: 100% 24px;
}

<p class="linedText">fdfdfdfdfdfdf<br>dfdfd<br>fdf<br>df</p>

And it generates like following:

printed textarea

Now I need to change the style to dotted. Can anyone do it for me please? I tried it for sometimes, but no luck, so thought of SO for a quick response.

Thanks.

You may be able to use border-bottom instead of a background, and that way you can set the style to dotted. — Josiah, Mar 13 '14 at 13:05
possible duplicate of http://stackoverflow.com/questions/15252597/how-to-add-a-dotted-underline-beneath-html-text — BRBT, Mar 13 '14 at 13:06

score 4 · Accepted Answer · answered Mar 13 '14 at 13:22

This is an example of how you can achieve what you're trying.

It's just a matter of using two linear gradients with rgba colors = transparency and make them overlap to create a pattern to be repeated.

It's not cross browser (webkit only). Just a snippet to get you started.

background-image: 
        -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
        -webkit-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);

background-size: 12px 24px;

CSS gradient to produce dotted line

1 Answers1

Linked