用滚动条在文本区域上的圆角

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>