如何用CSS为<h1>标签实现单侧带半圆的边框（非图片方案）？

完全不需要依赖图片，用CSS伪元素就能实现你要的效果，核心是利用CSS边框绘制三角形，模拟右下角的切角边框样式。

完整实现代码 #

HTML结构

<h1>Menu</h1>

CSS样式

h1 {
  background-color: #007bff; /* 蓝色背景 */
  color: #fff; /* 文字白色 */
  padding: 12px 24px;
  position: relative;
  display: inline-block; /* 让标题宽度适配内容 */
  font-size: 24px;
  margin: 0;
}

/* 绘制切角的蓝色边缘，形成边框感 */
h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-top: 22px solid #007bff;
  z-index: 1;
}

/* 绘制白色填充的切角，覆盖部分蓝色边缘，形成目标边框样式 */
h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-top: 20px solid #fff; /* 颜色与页面背景色保持一致 */
  z-index: 2;
}

效果调整说明 #

• 修改伪元素border-left和border-top的数值（比如示例中的22px、20px），可以控制切角的大小和边框的粗细；
• 替换颜色值，可适配不同的页面主题；
• 如果需要标题撑满容器宽度，把display: inline-block改为block即可。

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