Inverted rounded CSS corners

gistfile1.txt

#transaction-toggler li {
  background-color: #f2f2f2;
  display: inline-block;
  position: relative;
  padding: 2px 10px;
}

#transaction-toggler li:before,
#transaction-toggler li:after,
#transaction-toggler li a:before,
#transaction-toggler li a:after {
  content:'';
	position: absolute;
	top: 0;
}

/* Squares */
#transaction-toggler a:before,
#transaction-toggler a:after {
  background: #F2F2F2;
  width: 24px;
  height: 24px;
  z-index: 1;
}

#transaction-toggler a:before {
	left: -24px;
}

#transaction-toggler a:after {
	right: -24px;
}

/* Circles */
#transaction-toggler li:before,
#transaction-toggler li:after {
  z-index: 2;
}

#transaction-toggler li:before {
  width: 50px;
  height: 50px;
  @include border-radius(50px);
  background-color: white;
  left: -53px;
}

#transaction-toggler li:after {
  width: 50px;
  height: 50px;
  @include border-radius(50px);
  background-color: white;
  right: -53px;
}