How to draw separator between lines in textarea

Question

Is it possible to draw a separator between lines in textarea using only CSS, like in the picture below:

Note: I know this is very easy if I used table by creating a new row using javascript for each element, but I'm exploring if there is a simple solution using only CSS for textarea

Thank you,

Answer 1

Yes you can achieve it by css linear gradient. Demo

css

 textarea {
  height: 80px;
  line-height: 22px;
  background: repeating-linear-gradient(
  0,
  #222,
  #222 1px,
  #333 1px,
  #333 20px
);
 color: #fff; 
}

html

<textarea name="" id="" cols="30" rows="10"></textarea>