Maintaining a padding inside of text-area

Question

Inside of my textarea, I wish to maintain a padding of 30px from the top.

textarea {
    display: block;
    width: 300px;
    height: 50px;
    padding-top:         


        

Answer 1

It looks like for the textarea element the padding is added, but the text is still visible in the padding zone. I haven't really found a good solution so I came up with a workaround using a combination of border and outline to mimic the padding inside the textarea:

textarea {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
    outline: 1px solid #dadcde;
}

The top and bottom transparent borders are the actual padding. They add extra space between between the text and the textarea.

The left and right transparent borders prevent border artifacts left due to how the borders are calculated and drawn in the browsers.

The outline is the actual visible border of the textarea and replaces the border property.

Here's a jsFiddle example to show how it works