Как сделать обводку с одной стороны
Рассказываем, как добавить границу (обводку) для элемента только с одной стороны. Это может быть полезно для карточек, блоков текста и других элементов.
Смотрите видео:
https://vk.com/video-219751701_456239265
Разберем процесс на примере карточек, которым нужно добавить черную обводку только по верхнему краю.
Пошаговая инструкция
Шаг 1: Выделите нужный элемент
Для быстрого выделения можно зажать клавишу Ctrl и кликнуть на элемент.
Когда вы выделите элемент, справа появятся его настройки стилей.
Шаг 2: Перейдите к настройкам границ
Прокрутите панель стилей вниз и найдите раздел Границы. Нажмите на «+» справа, чтобы активировать настройки границ.
Шаг 3: Выберите нужную сторону для границы
По умолчанию в настройках границ выбраны все стороны элемента — подсвечена иконка «все стороны». Если добавить границу сразу, то она будет со всех сторон элемента.
Чтобы сделать границу только с одной стороны, нужно сначала выбрать эту сторону, а потом задавать границу.
В нашем примере выберем верхнюю сторону — подсветится соответствующая иконка в настройках.
Шаг 4: Задайте параметры границы
- Задайте толщину границы — например, 1px.
- Задайте цвет границы.
Готово! Граница появилась только сверху карточки.
Осталось проделать то же самое для других карточек и добавить для них границу сверху.
Дополнительные возможности
-
Вы можете добавить обводку с любой из сторон элемента или с нескольких сторон сразу. Для этого последовательно выбирайте нужные стороны и задавайте для них параметры.
-
Таким же образом можно задавать границы не только карточкам, но и другим элементам.
Резюме
Чтобы добавить границу с одной стороны элемента:
- сначала выберите нужную сторону границы, а потом задайте параметры границы — толщину и цвет.