I assume that default (non-transparent) -webkit-tap-highlight-color is the fastest way to react to the user's touch before doing complex DOM manipulations. This is especially noticeable on older, slower devices.

As far as I understand, the border-radius rule is not applicable to tap-highlighting. Is there still some way to do this for elements like rounded buttons?

button {
  appearance: none;
  border: none;
  padding: 1em 2em;
  border-radius: 2em;
  -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}
button:active {
  color:red;
}

Enter