如何删除CSS中的按钮边框？

Question

以下是我的jsfiddle。 https://jsfiddle.net/xuhang1128/1wff2rqv/5/

主要代码如下。

.design2-statusMonitor {
  margin-top: 20px;
}
.design2-statusMonitor .list-group-item {
  display: inline-block;
  background-color: transparent;
  //border-right: 0.5px solid #CAD5E0;
  border-top: 1px solid #CAD5E0;
  border-bottom: 1px solid #CAD5E0;
  width: auto;
}
.design2-statusMonitor .list-group-item.selected {
  background-color: #2f749a;
}
.design2-statusMonitor .list-group-item:focus {
  outline: none;
}
.design2-statusMonitor .list-group-item:after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  right: -6px;
  top: 43%;
  z-index: 2;
  background-color: white;
  border-top: 2px solid #CAD5E0;
  border-right: 2px solid #CAD5E0;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

下面是我单击它时的屏幕截图。您可以看到，当我单击它时，背景色似乎没有完全填充按钮，左右边缘是否存在？当我单击下面的按钮时，如何消除该间隙？

Answer 1

只需添加border: none到：

.design2-statusMonitor .list-group-item.selected {
  border: none;
}

更新的小提琴

但是更好的解决方案是这样的：

.design2-statusMonitor .list-group-item.selected {
  border-top: none;
  border-right-color: #2f749a;
  border-bottom: none;
  border-left-color: #2f749a;
}

.design2-statusMonitor .list-group-item.selected:hover {
  border-right-color: #c0d5e0;
  border-left-color: #c0d5e0;
}

只是为了避免影响宽度。

更新的小提琴