Как сделать обводку с одной стороны

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

Смотрите видео:

Kinescope
VK Video
RuTube
YouTube
Vimeo

Разберем процесс на примере карточек, которым нужно добавить черную обводку только по верхнему краю.

Карточки, которым нужно добавить обводку

Пошаговая инструкция

Шаг 1: Выделите нужный элемент

Для быстрого выделения можно зажать клавишу Ctrl и кликнуть на элемент.

Когда вы выделите элемент, справа появятся его настройки стилей.

Выделяем карточку — элемент review-item

Шаг 2: Перейдите к настройкам границ

Прокрутите панель стилей вниз и найдите раздел Границы. Нажмите на «+» справа, чтобы активировать настройки границ.

Открытые настройки границ

Шаг 3: Выберите нужную сторону для границы

По умолчанию в настройках границ выбраны все стороны элемента — подсвечена иконка «все стороны». Если добавить границу сразу, то она будет со всех сторон элемента.

Добавили границу 1px

Граница появилась со всех сторон карточки

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

В нашем примере выберем верхнюю сторону — подсветится соответствующая иконка в настройках.

Выбрали верхнюю сторону

Шаг 4: Задайте параметры границы

Задайте толщину границы — например, 1px.

Задайте цвет границы.

Задали параметры границы

Готово! Граница появилась только сверху карточки.

Добавилась граница сверху карточки

Осталось проделать то же самое для других карточек и добавить для них границу сверху.

Дополнительные возможности

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

Таким же образом можно задавать границы не только карточкам, но и другим элементам.

Резюме

Чтобы добавить границу с одной стороны элемента:

сначала выберите нужную сторону границы, а потом задайте параметры границы — толщину и цвет.