Bootstrap 3 button group: corner radius disappears after a button is hidden

Question

I have the following Bootstrap 3 button group:

  Left
         


        
      

Answer 1

A pure CSS workaround which may be an acceptable solution is to put curved ends onto the btn-group itself using :before and :after pseudo-selectors so we don't end up with a border around the whole thing. Obviously, this won't apply the corner-radius directly to your buttons (as requested) but it can look good when your buttons aren't all different colours.

NOTE: you will either ALWAYS require hidden buttons at the start and end (to square the edges), or more reasonably, remove the radius from the btn-group CSS.

Here's a fiddle, or check the snippet below.

.btn-group{
  margin:20px; /* just for the demo */
}

.btn-group:before,.btn-group:after{
  display:block;
  float:left;
  content:".";
  color:transparent;
  /* WARNING: 
  Matching the bootstrap rules here, this can change when size rules (sm,xs) are applied to buttons 
  */
  padding: 6px 3px;
  font-size: 14px;
  border:1px solid #ccc;
}

.btn-group:before{
  border-radius: 4px 0 0 4px;
  border-right:none;
}

.btn-group:after{
  border-radius: 0 4px 4px 0;
  border-left:none;
}

/* WARNING: hard-coding bootstrap colour values, for demo-purposes, not recommended */
.btn-group.primary:before,.btn-group.primary:after{
  background-color:#337ab7;
  border-color:#2e6da4;
}

/* WARNING: hard-coding bootstrap colour values, for demo-purposes, not recommended */
.btn-group.info:before,.btn-group.info:after{
  background-color:#5bc0de;
  border-color:#46b8da;
}

  One
  Two
  Three
  Four
  Five




  One
  Two
  Three
  Four
  Five



  One
  Two
  Three
  Four
  Five



  One
  Two
  Three
  Four
  Five