Как сделать border динамическим по ширине на десктопе и по высоте на смартфоне?

Чтобы сделать border динамическим по ширине на десктопе и по высоте на смартфоне, можно использовать медиа-запросы в CSS и задать разные свойства для border в зависимости от ширины экрана. Вот пример, как это можно сделать:

1. Сначала добавьте общие стили для элемента, включая border, который должен быть применен на десктопе:

.element {
  border: 2px solid black;
}

2. Далее, используя медиа-запросы, задайте новые стили для border, которые будут применяться на смартфонах. В этом случае, мы зададим border по высоте:

@media (max-width: 600px) {
  .element {
    border: none;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
  }
}

В приведенном примере, медиа-запрос @media (max-width: 600px) означает, что эти стили будут применяться только для экранов с максимальной шириной 600 пикселей, то есть на смартфонах.

3. Теперь, когда вы применили медиа-запросы, border будет динамически изменяться в зависимости от ширины экрана. На десктопе будет использоваться обычный border, а на смартфонах border будет применяться по высоте.

В итоге, ваша HTML-разметка может выглядеть примерно так:

<div class="element">Содержимое элемента</div>

А CSS-стили:

.element {
  border: 2px solid black;
}

@media (max-width: 600px) {
  .element {
    border: none;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
  }
}

Данный подход позволяет создать динамический border, который будет подстраиваться под разные устройства и обеспечивать хорошую адаптивность вашего дизайна.