用滾動條在文本區域上的圓角

Question

在我的網站上，我有一個html textarea ，其中的框中包含大量文本，因此具有滾動功能。 好吧，我希望在文本區域上有圓角，但是滾動條看起來很糟糕。

這是我的HTML代碼段：

    <textarea readonly class="xmlbox">
        @Html.DisplayFor(modelItem => item.XMLText)
    </textarea>

這是我的CSS代碼段：

.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;
}

這是一個JSFiddle ，可以了解我的意思。

有沒有一種方法可以推入滾動條，或者可以縮小滾動條或者基本上使它看起來不錯？

我看到的一幅照片是：

我以為這可以用，但是在CSS中重新創建邊框時遇到了麻煩。 關於如何使帶有圓角的滾動文本區域看起來不錯的任何提示或想法，請告訴我！ 謝謝！

注意：這需要在所有瀏覽器中看起來都不錯，因此請避免僅使用Webkit解決方案。 如果您知道所有瀏覽器的方式，那很好。 我傾向於銳利的內角和圓形的外邊界，但是無法復制圖片以查看是否可以使用。 或者另一種方法是將滾動條墊到右側？ 那可能嗎？

Answer 1

通過使用圓角樣式將textarea嵌套在div中，您應該能夠實現所需的功能。

這里有一個例子：

帶圓角和內部滾動條的DIV

Answer 2

將textarea放在div中，並為其設置邊框半徑和填充

<div style="border-radius:10px; border:1px solid #000; padding:20px;">
   <textarea readonly class="xmlbox">
      @Html.DisplayFor(modelItem => item.XMLText)
   </textarea>
</div>