如何用CSS实现内凹border-radius？负数值尝试无效求解决

border-radius属性不支持负值，所以你设置border-right-bottom-radius: -100px不会生效。要实现右下角内凹的效果，可以用伪元素模拟，具体代码如下：

<div style="max-width: 850px; height: 850px; background-color: #FBF6E9; padding: 10px; position: relative; overflow: hidden;">
</div>
<style>
  div::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200px;
    height: 200px;
    background-color: #fff; /* 替换为容器外部的背景色 */
    border-top-left-radius: 100%;
  }
</style>

核心实现步骤： #

• 给容器添加position: relative和overflow: hidden，限制伪元素的显示范围
• 通过绝对定位的伪元素占据容器右下角区域，利用border-top-left-radius: 100%创建圆形边角，背景色与容器外部背景一致，从而形成内凹视觉效果

你可以根据需求调整伪元素的宽高，来改变内凹的大小和弧度。

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