title: Rounded corners on a textarea with a scrollbar
body: <p>On my website I have a html <code>textarea</code> with a large amount of text in the box so it has a scroll. Well I would like to have rounded corners on my text area, but it looks awful with the scroll bar.</p>
  
  <p>Here is my HTML snippet:</p>
  
  <pre><code>    &lt;textarea readonly class="xmlbox"&gt;
          @Html.DisplayFor(modelItem =&gt; item.XMLText)
      &lt;/textarea&gt;
  </code></pre>
  
  <p>Here is my CSS snippet:</p>
  
  <pre><code>.xmlbox {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      margin: auto;
      padding: 20px;
      width: 60%;
      height: 50%;
      border: 6px solid black;
      border-radius: 20px/200px;
      border-color: rgba(0, 0, 0, 0.3);
      background: rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
      opacity: 1;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -webkit-transition: opacity 1s ease, z-index 1s ease;
      -moz-transition: opacity 1s ease, z-index 1s ease;
      -ms-transition: opacity 1s ease, z-index 1s ease;
      -o-transition: opacity 1s ease, z-index 1s ease;
      resize: none;
  }
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/jfZj7/5/" rel="nofollow noreferrer">JSFiddle</a> to see what I mean.</p>
  
  <p>Is there a way to push the scroll bar in or maybe shrink it or basically anything to make it look nice? </p>
  
  <p>One thing I saw was this picture:
  <img src="https://i.stack.imgur.com/tnWIB.png" alt="sharp inner corner, round outer"></p>
  
  <p>and I thought this could work, but I had trouble recreating the border in CSS. Any tips or ideas on how to make a scrolling textarea look nice with rounded corners, please let me know! Thanks!</p>
  
  <p><strong>NOTE:</strong> This needs to look good in all browsers so refrain from just webkit solutions. If you know the way for all browsers then that is fine. I'm leaning toward sharp inside corner and round outside border, but I'm having trouble reproducing the picture to see if it will work. Or another way is pad the scroll bar to the right? Is that possible?</p>