如何实现此类圆角边框？尝试伪元素+border-radius无效，求解决方案

你需要的是右下角白色块带有向内凹的圆角，普通border-radius只能生成向外凸的圆角，所以无法直接实现。这里提供两种实用方案：

方案1：使用clip-path裁剪元素（推荐） #

通过clip-path的多边形裁剪功能，直接定义元素的可见区域，精准实现凹角：

body {
 padding: 10px;
 background: grey;
}

.card {
  height: 500px;
  width: 400px;
  background: black;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  position: relative;
}

.link-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: white;
  border-top-left-radius: 10px;
  /* 裁剪出右下角10px的凹圆角 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

<div class="card">
  <div class="link-box"></div>
</div>

方案2：伪元素模拟凹角（兼容性更好） #

如果需要兼容不支持clip-path的旧浏览器，可以用伪元素叠加出凹角效果：

body {
 padding: 10px;
 background: grey;
}

.card {
  height: 500px;
  width: 400px;
  background: black;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  position: relative;
}

.link-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: white;
  border-top-left-radius: 10px;
  position: relative;
}

/* 用黑色伪元素覆盖右下角，形成凹角 */
.link-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: black;
  border-top-left-radius: 10px;
}

<div class="card">
  <div class="link-box"></div>
</div>

内容的提问来源于stack exchange，提问作者matt.mcg