如何为悬浮在容器内容上的自定义滚动条添加圆角效果

你遇到的问题本质是border-right属于元素边框属性，border-radius只能作用于元素整体盒模型边缘，无法单独给边框部分添加指定圆角，推荐优先用原生自定义滚动条方案实现，完全兼容你所有需求： #

方案1：原生滚动条自定义实现（推荐） #

无需额外DOM节点，纯CSS即可实现7px宽半透明悬浮滚动条、右侧留7px间距、支持20px圆角的所有要求：

/* 滚动容器基础设置 */
.scroll-container {
  /* 实现滚动条悬浮在内容上方，下方内容正常可见 */
  overflow: overlay;
  /* 其他原有容器属性保持不变 */
}

/* 滚动条整体宽度设置为14px，预留出7px的右侧空白间距 */
.scroll-container::-webkit-scrollbar {
  width: 14px;
}

/* 滚动条轨道设为全透明，不遮挡内容 */
.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

/* 滚动条滑块核心样式 */
.scroll-container::-webkit-scrollbar-thumb {
  /* 半透明背景，可自行调整颜色和透明度 */
  background: rgba(0, 0, 0, 0.3);
  /* 直接设置你需要的20px圆角，无任何兼容问题 */
  border-radius: 20px;
  /* 背景仅渲染在内容区域，左右内边距各留7px，刚好得到7px宽的滑块，且右侧距离容器边缘7px */
  background-clip: content-box;
  padding: 0 7px;
}

/* 可选：滑块hover效果 */
.scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

方案2：兼容原有border-right实现的修改方案 #

如果你不想改动现有border-right模拟滚动条的核心逻辑，可以通过添加伪元素补全圆角：

/* 你原有模拟滚动条的滑块元素，假设类名为custom-scroll-thumb */
.custom-scroll-thumb {
  position: absolute;
  right: 7px;
  width: 0;
  border-right: 7px solid rgba(0, 0, 0, 0.3);
  /* 其他原有属性保持不变 */
}

/* 添加上端圆角 */
.custom-scroll-thumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 7px;
  height: 20px;
  border-radius: 10px 10px 0 0;
  background: inherit;
}

/* 添加下端圆角 */
.custom-scroll-thumb::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -7px;
  width: 7px;
  height: 20px;
  border-radius: 0 0 10px 10px;
  background: inherit;
}

内容的提问来源于stack exchange，提问作者Infamous911