如何用HTML和CSS实现带圆角的进度边框Div？

下面提供两种实用的CSS方案，实现带圆角的进度边框效果，可根据你的具体需求选择：

方案一：环形进度边框（通用型） #

这种方案可以实现任意百分比的环形进度边框，完美支持圆角，代码简洁易维护：

HTML结构 #

<div class="progress-container">
  <p>内容区域</p>
</div>

CSS样式 #

.progress-container {
  /* 自定义容器尺寸 */
  width: 220px;
  height: 220px;
  /* 圆角大小 */
  border-radius: 20px;
  position: relative;
  /* 内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 容器背景色 */
  background-color: #f5f5f5;
}

.progress-container::before {
  content: "";
  position: absolute;
  /* 覆盖整个容器 */
  inset: 0;
  /* 继承容器的圆角 */
  border-radius: inherit;
  /* 这里的padding值就是边框的宽度 */
  padding: 5px;
  /* 锥形渐变实现进度：第一个颜色是进度条颜色，百分比为进度值；第二个是剩余边框颜色 */
  background: conic-gradient(#3b82f6 0% 75%, #e2e8f0 75% 100%);
  /* 通过mask实现只显示边框部分 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

自定义说明

• 修改进度：调整conic-gradient中的百分比（比如75%改成50%就是50%进度）
• 修改边框宽度：调整伪元素的padding值
• 修改圆角：统一调整.progress-container的border-radius即可
• 修改颜色：替换conic-gradient中的颜色值

方案二：单向进度边框（如顶部/底部/左侧/右侧） #

如果只需要某一侧的进度边框（比如顶部边框从左到右显示进度），可以用这个更简单的方案：

HTML结构 #

<div class="single-side-progress">
  <p>单向进度示例</p>
</div>

CSS样式 #

.single-side-progress {
  width: 300px;
  height: 180px;
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  /* 可选：给其他边框设置默认灰色 */
  border: 3px solid #e2e8f0;
  border-top: none; /* 隐藏顶部默认边框，用伪元素代替 */
}

.single-side-progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px; /* 边框高度 */
  /* 进度宽度：70%就是70%进度 */
  width: 70%;
  /* 对应容器的顶部圆角 */
  border-radius: 16px 0 0 0;
  background-color: #3b82f6;
}

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