Как сделать, чтобы бордеры не накладывались один на другой?

Чтобы избежать наложения бордеров друг на друга в CSS, можно использовать несколько методов и свойств.

1) Использование свойства box-sizing: border-box. Это свойство позволяет включить границы внутрь элемента, так что они не увеличивают его общую ширину или высоту. Например:

.box {
   box-sizing: border-box;
}

2) Использование свойства outline вместо border. Свойство outline похоже на border, но не занимает места внутри элемента, поэтому не будет накладываться на соседние элементы. Однако, обратите внимание, что outline имеет свои особенности и может не работать со всеми элементами. Например:

.box {
   outline: 2px solid red;
}

3) Использование свойства box-shadow вместо border. Свойство box-shadow позволяет добавлять тени вокруг элемента, вместо того, чтобы использовать границы. Тени не влияют на размеры элемента и не накладываются друг на друга. Например:

.box {
   box-shadow: 0 0 2px 2px red;
}

4) Использование псевдоэлементов ::before или ::after для создания границы. Псевдоэлементы можно использовать для добавления дополнительных элементов перед или после основного содержимого элемента. Таким образом, границы будут добавлены к псевдоэлементу, а не к самому элементу. Например:

.box::before {
   content: "";
   display: block;
   width: 100%;
   height: 2px;
   background-color: red;
}

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