咨询：为何按钮无法设置border-radius属性？

红色边框仅作参考，已尝试设置overflow: hidden但未生效，希望按钮拥有与红色边框相同的border-radius，请问哪里操作有误？

原代码 #

CSS #

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --violet: #8F00FF;
}

.rating {
    border: 1px solid red;
    border-radius: 8px;
    width: 30px;
    margin-left: 100px;
    margin-top: 100px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0px 8px rgba(172, 169, 169, 0.1);
}

button {
    border: none;
    border-radius: 8px;
    align-items: center;
    color: var(--violet);
    font-weight: bold;
    cursor: pointer;
    -webkit-border-radius:10px;
    overflow: hidden;
}

.rating span {
    display: flex;
    justify-content: center;
    color: var(--violet);
    font-weight: bold;
}

HTML #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interface</title>

    <!-- CSS Link -->
    <link rel="stylesheet" href="style.css">

    <!-- Boxicons -->
    <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- JS Link -->
    <script src="script.js" defer></script>
</head>
<body>
        
    <!-- <div class="single-card">
       

        
    </div> -->

    <div class="rating">
        <button>+</button>
        <span>12</span>
        <button>-</button>
    </div>
</body>
</html>

错误分析及修正方案 #

问题点 #

1. 圆角值冲突：按钮同时设置了border-radius:8px和-webkit-border-radius:10px，带前缀的属性优先级更高，导致按钮圆角和容器的8px不一致。
2. 圆角方向错误：给按钮设置了四个角的圆角，但容器的圆角仅在顶部和底部，按钮的全圆角会超出容器范围，视觉上不匹配。
3. 容器未启用溢出隐藏：容器本身没加overflow:hidden，即使按钮圆角正确，也无法限制内部元素超出圆角区域。

修正后的CSS代码 #

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --violet: #8F00FF;
}

.rating {
    border: 1px solid red;
    border-radius: 8px;
    width: 30px;
    margin-left: 100px;
    margin-top: 100px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0px 8px rgba(172, 169, 169, 0.1);
    overflow: hidden; /* 启用溢出隐藏，限制内部元素 */
}

button {
    border: none;
    color: var(--violet);
    font-weight: bold;
    cursor: pointer;
    background-color: #f0f0f0; /* 按钮背景与容器一致 */
    padding: 4px 0; /* 增加内边距优化布局 */
}

/* 顶部按钮仅保留顶部圆角 */
.rating button:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 底部按钮仅保留底部圆角 */
.rating button:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.rating span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--violet);
    font-weight: bold;
    padding: 4px 0;
}

修正说明 #

• 移除按钮上冲突的-webkit-border-radius:10px，统一使用标准圆角值。
• 给容器添加overflow:hidden，确保内部元素不会超出容器圆角范围。
• 分别给上下按钮设置对应方向的圆角，与容器圆角完全匹配。
• 给按钮和中间数字添加内边距，优化整体布局的匀称性。

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