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

Для того чтобы при клике на элемент и его выделении учитывался border-radius, вы можете использовать псевдоэлемент ::after или ::before вместе с псевдосостоянием :focus. Такой подход позволит вам добавлять кастомную обводку, учитывая border-radius элемента и придавая ему согласованный вид при активации.

Вот пример кода, который демонстрирует этот подход:

CSS:

/* Создаем круглый элемент с border-radius */
.element {
  width: 200px;
  height: 100px;
  border-radius: 20px;
  background-color: #ccc;
  position: relative;
}

/* Создаем псевдоэлемент ::after, который будет служить кастомной обводкой */
.element::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid blue;
  border-radius: 25px;
  opacity: 0; /* Обводка будет невидима изначально */
  pointer-events: none; /* Обводка не будет влиять на события мыши */
}

/* Когда элемент получает фокус, меняем обводку на видимую */
.element:focus::after {
  opacity: 1;
}

HTML:

<div class="element" tabindex="0">Нажмите на меня</div>

В этом примере при клике на элемент он становится в фокус, и его обводка (сделанная с помощью псевдоэлемента ::after) появляется вокруг элемента, учитывая его border-radius. Вы можете настроить размеры, цвета и другие свойства обводки, чтобы они соответствовали вашим требованиям дизайна.

Этот подход позволяет создавать кастомные обводки, учитывая border-radius элемента, и легко применяется к различным элементам веб-страницы.