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

Question

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> 

Answer 1

you have to reset the border for button

 button { border: 0 } .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> 

Answer 2

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;
}

Answer 3

It's a little hard to see what you are referring to but you have to reset all the border widths first

 .button-viztype { height: 75px; font-size: 1.3em; border-width: 0; 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> 

Answer 4

It's because your other edges have a border. You can override defaults and set the borders like this:

.button-viztype {
    border: none;
    border-left: 7px solid #1B3D77;
}

etc.

Answer 5

 **Reset your Border of button to none ** .button-viztype { border: none; border-left: 7px solid #1B3D77; }