Html 如何阻止滚动条越过圆角？

我正在尝试创建一个表单，在其中一个文本区域输入中，滚动条正在通过圆角

：-webkit滚动条{
背景：无；
宽度：14px；
}
：-webkit滚动条拇指{
背景：卡德蓝；
边界半径：10px；
填充底部：40px；
}
文本区{
字体家族：“最幸运的家伙”，草书；
颜色：卡德蓝；
显示：块；
宽度：540px；
边框宽度：5px；
左边框颜色：卡德蓝；
边框底色：cadetblue；
右边框颜色：cadetblue；
边框顶部颜色：cadetblue；
边界半径：40px；
高度：190px；
字体大小：20px；
大纲：无；
调整大小：无；
}

我要做的一个方法是提供一个外部容器并使用这样的样式

：：-webkit滚动条{
背景：无；
宽度：24px；
}
：-webkit滚动条拇指{
背景：卡德蓝；
边界半径：10px；
填充底部：40px；
}
.textarea容器{
边框：1px实心卡德蓝；
颜色：卡德蓝；
显示：内联块；
填充：10px；
边框宽度：5px；
左边框颜色：卡德蓝；
边框底色：cadetblue；
右边框颜色：cadetblue；
边框顶部颜色：cadetblue；
边界半径：40px；
}
文本区{
宽度：200px；
边界：无；
字体家族：“最幸运的家伙”，草书；
显示：块；
高度：190px；
字体大小：20px；
大纲：无；
调整大小：无；
}

长文本
长文本
长文本
长文本
长文本
长文本
长文本
长文本

您的代码片段已断开（某些行似乎已丢失）。在CSS中，我宁愿以这种方式注释/*顺便说一句，您的文本和文本光标是否存在相同的问题？还是你解决了？