相邻元素的连接边界半径

这些边界可以通过连接相邻列表项元素的边界来实现。

在完成演示后，我意识到这实际上并不是达到目的的最佳方法。但由于它展示了如何传递一个想法，我认为它仍然值得留在这里。

设置活动项目的样式-左边框和上边框：

我添加了active类来区分活动和非活动导航链接。
带有active的项目只有边框***左***和***上***样式：

li.active a {    
  position: relative;
  color: black;  
  vertical-align: super;
  border-top: solid var(--border-size) var(--border-color);
  border-left: solid var(--border-size) var(--border-color);    
  border-radius: var(--border-radius-active) var(--border-radius-active) 0px 0px; 
}

设置活动项目样式-右边框：

而***右***边界使用伪元素::after进行样式化，定位为absolute。我们不能直接样式化右边界的原因是因为它的长度不能是整个高度，因为我们试图将来自两个不同元素的边界半径与这一段连接起来，如果我们使用整个长度，它看起来就不对了：

li.active a::after {  
  content:"";
  background: var(--border-color);
  position: absolute;
  bottom: var(--border-offset-bottom);
  right: 0;
  height: calc(100% - var(--border-offset-top) - var(--border-offset-bottom));
  width: var(--border-size);  
}

设置下一个项目的样式- border-bottom：

最后，行的最后一部分由下一个元素设置样式：

li.active + li a {
  border-bottom: solid var(--border-color) var(--border-size);
  border-radius: 0 0 0 var(--border-radius-inactive);
}

自定义属性：

我将核心参数编码为:root元素中的自定义属性：

--border-color: #EEF7FF;  
--border-size: 1px;
--border-offset-top: 4px;
--border-offset-bottom: 2px;
--border-radius-active: 10px;
--border-radius-inactive: 3px;

演示：

在演示中，您可以将边框颜色切换为红色，以便更好地查看对比结果：

:root{
  --border-color: #EEF7FF;  
  --border-size: 1px;
  --border-offset-top: 4px;
  --border-offset-bottom: 2px;
  --border-radius-active: 10px;
  --border-radius-inactive: 3px;
}

.red{
  --border-color: red;  
}

*{
  box-sizing: border-box;
}

body{
  font-size: 30px;
  font-family: sans-serif;
}

.test {  
  display: inline-flex;
}

.test li {
  float: left;
  list-style-type: none;  
}

.test li a{
  text-decoration: none;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #A6B5C7;
}

li.active a {    
  position: relative;
  color: black;  
  vertical-align: super;
  border-top: solid var(--border-size) var(--border-color);
  border-left: solid var(--border-size) var(--border-color);    
  border-radius: var(--border-radius-active) var(--border-radius-active) 0px 0px;
}

li.active a::after {  
  content:"";
  background: var(--border-color);
  position: absolute;
  bottom: var(--border-offset-bottom);
  right: 0;
  height: calc(100% - var(--border-offset-top) - var(--border-offset-bottom));
  width: var(--border-size);  
}

li.active + li a {
  border-bottom: solid var(--border-color) var(--border-size);
  border-radius: 0 0 0 var(--border-radius-inactive);
}

button{
  cursor: pointer;
  padding: 1em;
}

<div style="margin-top: 20px;">
  <ul id="nav" class="test" style>
    <li class="active">
      <a href="#">All</a>
    </li>
    <li>
      <a href="#">Solved</a>
    </li>
  </ul>
</div>

<button onclick="document.getElementById('nav').classList.toggle('red')">change color to red!</button>