Как сделать так, чтобы при клике на элемент a или button на мобильном устройстве и его выделении учитывался border-radius?

Вы можете только поменять цвет подсветки ( https://developer.mozilla.org/en-US/docs/Web/CSS/-… ), все остальное недоступно для кастомизации.

UPD
Александр настаивает, что нужно давать варианты решения, даже если их нет =) ну ладно..

Можно задать прозрачный цвет для этой подсветки. Потом сделать собственную, например псевдоэлементом. И показывать ее на секунду при клике тапе.

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  position: relative;
  &::after {
    position: absolute;
    left 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: rgba(blue, 0.5);
    border-radius: 20px;
    display: none;
  }
  &.highlight::after {
    display: block;
  }
}

a.addEventListener('touchstart', e => {
  e.target.classList.add('highlight');
  setTimeout(() => e.target.classList.remove('highlight'), 500);
});

Стоит ли оно того — решать вам.

я так понимаю у вас кнопки типа:

<input type="button">

тогда сделайте вот так:

input:hover { border-radius:30px; background:red; }

вам необходимо задать кнопке стили закругление бордюра + цвет когда тык делаете
если у вас высота кнопки 40px, то для border-radius нужна половинка 20px и закругление будет плавным