title: Rounded corners to a textarea
body: <p>Please see the attached image and jsfiddle: <a href="http://jsfiddle.net/chqy9dja/" rel="nofollow noreferrer">http://jsfiddle.net/chqy9dja/</a></p>
  
  <p><img src="https://i.stack.imgur.com/xz9VI.jpg" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>I know this can be fixed with a jquery/javascript plugin, but I'm looking for a css-only approach.</p>
  
  <p><strong>I only need to add some padding between the scrollbar and the border.</strong></p>
  
  <p>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.</p>
  
  <p>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..</p>
  
  <p>Any other ideas please? Style directly on the textarea, not a wrapping div.</p>
  
  <pre><code>&lt;textarea id="a" class="a" /&gt;
  
  .a {
      width: 300px;
      height: 300px;
      border-radius: 10px;
      border: 1px solid #000;
  }
  </code></pre>