为何container容器底部border-radius属性不生效？

你的问题核心是容器的子元素背景色覆盖了底部圆角，同时容器未裁剪超出圆角区域的内容，导致底部圆角无法显示。

问题原因 #

1. .price 和 .benefits 拥有独立背景色，高度填满容器底部且自身无圆角，直接覆盖了容器的底部圆角样式。
2. 默认情况下，父容器不会裁剪超出自身圆角范围的子元素内容，子元素的直角边缘会暴露出来。

解决方案 #

给 .container 添加 overflow: hidden 属性，强制容器裁剪掉超出圆角区域的子元素内容，让容器的圆角完整作用于所有子元素。

修改后的SASS代码 #

@use '../1-helpers-colors/mixins' as *;
@use '../1-helpers-colors/variables' as *;

body{
    background-color: #E6EFF6;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container{
    width: 75rem;
    max-width: 100%;
    background-color: white;
    border-radius: 2rem;
    // 添加该行，强制裁剪超出圆角的子元素
    overflow: hidden;

    .community{
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        h3{
           color:  #45ADAC;
        }
        h4{
            color: #BFDF32;
        }
        p{
            max-width: 60rem;
            color: #A8ACB5;
        }
    }

    .price-benefits{
        display: flex;
    }
    .price{
        background-color: #2BB3B1;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        h4{
            color: white;
        }
        p{
            color: white;
        }
    }
    .price-dollars{
        display: flex;
        gap: 2rem;
        align-items: center;
        h3{
            color: white;
        }
        p{
            color: white;
            opacity: 0.5;
        }
    }

    .benefits{
        background-color: #4ABEBD;
    }
    .col{
        width: 50%;
        padding: 3rem;
    }

    button{
        background-color: #b0ca3a;
        padding: 1.5rem;
        border-radius: 0.5rem;
        border: none;
        a{
            color: white;
        }
    }
    .benefits{
        h4{
            color: white;
            margin-bottom: 1.5rem;
        }
        ul li{
            color: white;
            opacity: 0.5;
         }
         ul{
            display: flex;
            flex-direction: column;
         }
    }
}

额外说明 #

如果需要让底部两个子元素的内侧也呈现圆角（比如 .price 的右下角、.benefits 的左下角），可以单独给它们添加对应圆角属性，但这不是必须的——添加 overflow: hidden 后，容器的圆角已经能完整包裹所有子元素。

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