设置border-radius:20px后背景色溢出边框的问题求助

给容器设置border-radius: 20px后，内部元素的背景色会溢出圆角边框，示例代码及问题效果如下：

示例代码 #

CSS #

.bar{
    padding: 20px;
}

.barContainer{
    width: 50%;
    background-color: #cccccc;
    border: 1px solid #111;
    border-radius: 20px
}

.per {
    text-align: right;
    padding: 10px 0;
    color: #111;
    
}

.html {width: 90%; background-color: #f44336;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #FEF70F;}
.java {width: 60%; background-color: #808080;}
.php {width: 60%; background-color: #008631;}

HTML #

<div class="bar">
    <div class="topic">HTML</div>
    <div class="barContainer">
        <div class="per html">90%</div>
    </div>
    <div class="topic">CSS</div>
    <div class="barContainer">
        <div class="per css">80%</div>
    </div>
    <div class="topic">JavaScript</div>
    <div class="barContainer">
        <div class="per js">50%</div>
    </div>
    <div class="topic">Java</div>
    <div class="barContainer">              
        <div class="per java">50%</div>
    </div>
    <div class="topic">PHP and MySQL</div>
    <div class="barContainer">
        <div class="per php">50%</div>
    </div>                
</div>

问题效果 #

解决方法 #

原因 #

父容器的border-radius仅作用于自身的边框和背景，不会自动裁剪内部子元素的内容，导致子元素的背景延伸到圆角之外。

方案一：添加overflow:hidden（推荐） #

给.barContainer添加overflow: hidden属性，让父容器裁剪超出圆角范围的子元素内容：

.barContainer{
    width: 50%;
    background-color: #cccccc;
    border: 1px solid #111;
    border-radius: 20px;
    overflow: hidden; /* 新增属性 */
}

方案二：使用clip-path #

如果需要更精细的裁剪控制，可以用clip-path属性模拟圆角效果，不过这种方式需要手动匹配圆角值，不如overflow:hidden便捷：

.barContainer{
    width: 50%;
    background-color: #cccccc;
    border: 1px solid #111;
    border-radius: 20px;
    clip-path: inset(0 round 20px); /* 值与border-radius保持一致 */
}

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