Q:

CSS - left border of button is rounded on the right side

In an Ionic mobile app, I want to add a thick left border to buttons.  But as you can see in the screenshot the right side of this left border seems rounded.  
I already tried to solve this by setting the border-radius to 0, but that has no effect.  

.button-viztype {
  height: 75px;
  font-size: 1.3em;
  border-style: solid;
  border-left-width: 7px;
  box-shadow: 0px 3px 1px #c3c3c3;
}
.button-distribution {
  border-left-color: #1B3D77;
}
.button-comparison {
  border-left-color: #397EF6;
}
.button-composition {
  border-left-color: #6181B8;
}
.button-relationship {
  border-left-color: #82ADF6;
}
<div class="row">
  <div class="col">
    <button class="button button-distribution button-full button-viztype">
      Distribution
    </button>
  </div>
  <div class="col">
    <button class="button button-comparison button-full button-viztype">
      Comparison
    </button>
  </div>
</div>
<div class="row">
  <div class="col">
    <button class="button button-composition button-full button-viztype">
      Composition
    </button>
  </div>
  <div class="col">
    <button class="button button-relationship button-full button-viztype">
      Relationship
    </button>
  </div>
</div>

A:

You can override the button border:
https://jsfiddle.net/uwnyds3s/
.button-viztype {
    border: none;
    height:75px;
    font-size: 1.3em;
    border-left-style: solid;
    border-left-width: 7px;
    box-shadow: 0px 3px 1px #c3c3c3;
}

