四角添加Border，需可控虚线样式及圆角效果，求助实现方案

方案一：使用SVG背景实现（推荐） #

SVG能精准控制虚线样式与端点圆角，是最可靠的解决方案。

1. 内联SVG背景实现
   将定义好的SVG作为元素背景，通过stroke-linecap="round"确保虚线端点为圆角，stroke-dasharray控制虚线的段长与间距：

.corner-dashed-box {
  width: 300px;
  height: 200px;
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="2" y="2" width="96%" height="96%" rx="8" ry="8" fill="none" stroke="#000" stroke-width="2" stroke-dasharray="10,6" stroke-linecap="round"/></svg>');
  background-size: 100% 100%;
  padding: 16px;
}

• stroke-dasharray="10,6"：第一个值为虚线线段长度，第二个为线段间距，可按需调整
• rx="8" ry="8"：控制边框整体圆角大小，固定为你需要的样式
• stroke-width="2"：设置边框粗细，可自定义
• x="2" y="2" width="96%" height="96%"：避免SVG边框与元素边缘重叠，可根据stroke-width数值微调

2. 样式自定义
   如需修改边框颜色、虚线参数，直接调整SVG代码里的stroke、stroke-dasharray等属性即可。

方案二：CSS伪元素+渐变模拟（简易版） #

若不想使用SVG，可通过CSS渐变模拟虚线，但端点圆角的精度稍差：

<div class="corner-dashed-box">
  <span class="top-border"></span>
  <span class="bottom-border"></span>
  <!-- 内容 -->
</div>

.corner-dashed-box {
  width: 300px;
  height: 200px;
  position: relative;
  border-radius: 8px;
  padding: 16px;
}

.corner-dashed-box::before,
.corner-dashed-box::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #000 0%, #000 10px, transparent 10px, transparent 16px) repeat-x;
  background-size: 16px 2px;
  height: 2px;
  width: calc(100% - 32px);
  left: 16px;
}

.corner-dashed-box::before {
  top: 2px;
}

.corner-dashed-box::after {
  bottom: 2px;
}

.corner-dashed-box .top-border,
.corner-dashed-box .bottom-border {
  position: absolute;
  background: linear-gradient(0deg, #000 0%, #000 10px, transparent 10px, transparent 16px) repeat-y;
  background-size: 2px 16px;
  width: 2px;
  height: calc(100% - 32px);
  top: 16px;
}

.corner-dashed-box .top-border {
  left: 2px;
}

.corner-dashed-box .bottom-border {
  right: 2px;
}

• 通过线性渐变的实色段与透明段模拟虚线，可调整渐变数值改变虚线样式
• 此方法无法实现完美的圆角端点，仅适合对精度要求不高的场景

工具失败原因说明 #

你尝试的工具基于原生CSS方案，但原生border-dashed不支持控制端点圆角，工具仅能模拟虚线形态，无法满足你需要的圆角端点要求。而SVG的stroke-linecap="round"是原生支持端点圆角的特性，因此能精准实现需求。

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