Rounded corners to a textarea

Question

Please see the attached image and jsfiddle: http://jsfiddle.net/chqy9dja/

A simple textarea, with rounded corners. Notice the problems on the right top and right bottom corners, where the scroll bar appears. The screenshot is taken with Chrome, but all other browsers share this bug.

I know this can be fixed with a jquery/javascript plugin, but I'm looking for a css-only approach.

I only need to add some padding between the scrollbar and the border.

Tried this, best solution so far: wrap the textarea in a div, style the div instead. Works, only minor problems appear when focusing on the element.

Tried to replace the border with an outline, and add outline-offset using css. Works great, problem is that outlines can not have rounded corners..

Any other ideas please? Style directly on the textarea, not a wrapping div.

<textarea id="a" class="a" />

.a {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid #000;
}

Answer 1

As you mentioned, outline can not have rounded corners. One option would be using a combination of border and box-shadow.

For instance you could give the element a transparent border and a proper box-shadow as follows:

Example Here

textarea {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 0 0 3px #000;
    border: 5px solid transparent;
}