Border and background inconsistent transition when transitioning to transparent

I want to have a consistent transition for both background color and border-color. However, it seems like there is some delay on the border-color. This issue is only present when transitioning to transparent.

div {
  height: 20px;
  background: red;
  border-bottom: 20px solid red;
  transition: all 1000ms;
}

div:hover {
  background: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0);
}

<div></div>

Link to Codepan

It's not because of the border transition is delayed, but the semi-transparent red border is actually overlapping on top of the semi-transparent red background during transition, so the border looks darker than the background.

You could add background-clip: padding-box so the background will not appear under the border.

Also, change the background(it's a shorthand which includes background-clip) to background-color, to avoid background-clip being modified when hovering, if you only need to change the color.

div {
  height: 20px;
  background-color: red;
  border-bottom: 20px solid red;
  transition: all 1000ms linear;
  background-clip: padding-box;
}

div:hover {
  background-color: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0);
}

<div></div>