Rounding a corner that's already been affected by a border-radius

Question

The first image below shows the result I'm trying to achieve. (You may ignore the overlapping tabs for now)

And now below this is what I've already made. The yellow highlited bit is what I'd like to round out, how would this be achieved?

Here is the CSS being acted upon the active tab.

.productTabs>li.active>a, .productTabs>li.active>a:hover, .productTabs>li.active>a:focus {
  color: #fff !important;
  border: none;
  border-bottom-color: transparent;
  cursor: default;
  background: linear-gradient(225deg,transparent 29px,#1c83c6 5px)!important;
  text-transform: uppercase;
}

JsFiddle: https://jsfiddle.net/zc23s9j1/