CSS实现仅为导航栏按钮侧边添加border-radius

问题根源有两个：一是默认按钮宽高比例较大，用百分比设置border-radius会因宽高差异形成椭圆；二是未给按钮匹配导航栏高度，也没针对性设置侧边圆角。

直接替换原有CSS部分即可解决，调整后的完整代码如下：

<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box; /* 避免padding撑大元素尺寸 */
}
#navigationBar {
background-color: #e4e4e4;
height: 40px;
display: flex; /* 让按钮横向整齐排列 */
align-items: center; /* 按钮垂直居中 */
gap: 2px; /* 按钮间留小空隙 */
padding: 0 8px;
}

.options {
border: none;
background-color: #ccc; /* 与导航栏区分，可自行调整颜色 */
height: 32px; /* 比导航栏稍矮，视觉更协调，也可设为40px */
padding: 0 18px;
/* 仅给左侧设置圆角，上下圆角为0 */
border-radius: 16px 0 0 16px;
cursor: pointer;
}

/* 给最后一个按钮添加右侧圆角 */
.options:last-child {
border-radius: 0 16px 16px 0;
}
</style>
</head>
<body>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>
</body>
</html>

核心调整说明： #

• 放弃百分比border-radius，改用固定值（16px是按钮高度32px的一半），保证边角为正圆形，不会因宽高比变成椭圆。
• 通过border-radius: 16px 0 0 16px仅给按钮左侧加圆角，最后一个按钮用:last-child选择器补充右侧圆角，实现“仅侧边有圆角”的需求。
• 用flex布局简化导航栏内按钮的对齐逻辑，避免手动调整行高的繁琐。
• 重置按钮默认边框、背景样式，让自定义样式更可控。

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