title: How to remove the button border in css?
body: <p>Below is my jsfiddle.
  <a href="https://jsfiddle.net/xuhang1128/1wff2rqv/5/" rel="nofollow noreferrer">https://jsfiddle.net/xuhang1128/1wff2rqv/5/</a></p>
  
  <p>the main code is below.</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>Below is the screenshot when I clicked it. You can see that when I clicked it, the background color seems not totally fill the button, the left and right edge existed? How to remove that gap when I clicked the button like below one?
  <a href="https://i.stack.imgur.com/0lFIf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0lFIf.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/5Mq3e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Mq3e.jpg" alt="enter image description here"></a></p>