Having one thicker border does no display correctly

Question

  border-right: 2px solid red;
  border-bottom: 2px solid red;
  border-top: 5px solid black;

Results in the top border being "bevelled", not square

  border-top: 5px solid black;

Contrast to above. Example: https://jsfiddle.net/sq29ohb3/1/