html - Solid black border somehow fades when adding a border-left -

i have created simple testcase demonstrating issue (reproducable in both firefox , chrome, suggesting somehow intentional)

div  {         border: 1px solid black;      border-left: 250px solid white;  }

<div>text</div>

if run above snippet hope you'll notice black border far solid, , becomes heavily faded on left side. why?

the issue you're experiencing can explained when initial border widths changed slightly.
borders attach 1 diagonally , having long left border stretches diagonal connection out. antialiasing leads fadeout you've described.

div {    border: 5px solid blue;    border-left: 25px solid red;  }

<div>text</div>

as continuous example of fadeout being created:

div {    border: 1px solid black;    border-left: 1px solid white;    margin-bottom: 2px;  }    div:nth-child(2) {    border-left-width: 2px;  }    div:nth-child(3) {    border-left-width: 5px;  }    div:nth-child(4) {    border-left-width: 10px;  }    div:nth-child(5) {    border-left-width: 25px;  }    div:nth-child(6) {    border-left-width: 100px;  }

<div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>