如何实现内圆角式边框效果？附现有代码与效果对比

你的问题出在直接给元素加borderBottom和borderRadius，这样只会生成外圆角。要实现底部的内凹圆角，推荐用两种简洁方案：

方案一：嵌套容器实现 #

<div style='
  display: inline-block;
  marginTop: 2.5%;
  width: 60%;
  paddingBottom: 75%;
  borderRadius: 20px;
  overflow: hidden; /* 关键：裁剪内部超出部分 */
  fontSize: 150%;
  /* 保留其他无关样式 */
'>
  <div style='
    width: 100%;
    height: 100%;
    borderBottom: 50px solid #FF6559;
    borderTopLeftRadius: 20px;
    borderTopRightRadius: 20px;
    box-sizing: border-box; /* 确保边框不撑开容器 */
  '></div>
</div>

原理 #

外层容器设overflow: hidden和整体圆角作为裁剪框，内部容器给底部加边框并设置顶部圆角，填满外层后就会被裁剪出内凹效果。

方案二：伪元素简化结构（无需额外嵌套） #

<div style='
  display: inline-block;
  marginTop: 2.5%;
  width: 60%;
  paddingBottom: 75%;
  borderRadius: 20px;
  overflow: hidden;
  fontSize: 150%;
  position: relative; /* 伪元素定位依赖 */
  /* 保留其他无关样式 */
'>
</div>

搭配CSS（可写在style标签或外部样式表）：

div::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #FF6559;
  borderTopLeftRadius: 20px;
  borderTopRightRadius: 20px;
}

这种方式结构更干净，效果和嵌套容器完全一致。

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