title: CSS gradient to produce dotted line
body: <p>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.</p>
  
  <pre><code>.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;
  }
  
  &lt;p class="linedText"&gt;fdfdfdfdfdfdf&lt;br&gt;dfdfd&lt;br&gt;fdf&lt;br&gt;df&lt;/p&gt;
  </code></pre>
  
  <p>And it generates like following:</p>
  
  <p><img src="https://i.stack.imgur.com/uk65H.png" alt="printed textarea"></p>
  
  <p>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.</p>
  
  <p>Thanks.</p>