Настройка внутренней рамки на одной стороне в CSS

Быстрый ответ

Чтобы создать одностороннюю границу, используйте псевдоэлементы ::before или ::after в CSS. Ниже приведён пример добавления границы справа:

.element::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px;
  background: #000;
}
.element { position: relative; }

Разместите границу на нужной стороне, изменяя параметры top, bottom, а также width и height.

box-shadow: скрытный спецагент границы

Если свойство border кажется слишком грубым для использования, вы можете воспользоваться свойством box-shadow. Это позволит создать одностороннюю границу с помощью параметров inset и слоёв теней:

.element {
  box-shadow: inset 0 10px 0 0 rgba(255, 0, 0, 0.5);
}

Тени не влияют на размер элемента блока, что позволяет настроить границы, не опасаясь нарушить структуру страницы.

Псевдоэлементы на все случаи жизни!

С помощью ::before вы можете создать необычную верхнюю границу:

.element::before {
  content: '';
  display: block;
  height: 2px;
  background-color: blue; 
  margin-top: -2px;
}
.element { position: relative; }

Не забывайте оставлять место для псевдоэлементов ::before или ::after, чтобы они могли корректно отображаться на уровне блока.

Padding и цвета: лучшие друзья границ

Для более эстетичного оформления границ настройте padding и background. Для удобной работы с цветами используйте переменные в CSS-препроцессорах, например, в Sass или Less.

Визуализация

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

|                  |
|                  |
|    🖼️             |
|                  |
|__________________|

Обычная граница: |****
Акцент на краю: ____

Результатом будет односторонняя граница, придающая изящество вашим HTML-проектам.

Пусть ваша граница станет уникальной

Флёрт в 3D

Изменяйте размытие и цвета box-shadow, чтобы придать границе 3D-эффект:

.element {
  box-shadow: inset 0 0 10px 1px #444;
}

Подробнее об этом расскажет наш спикер на видео

Сила фокуса

Придайте дополнительное оформление с использованием стиля :focus:

.input:focus {
  box-shadow: 0 0 0 3px #0078d7 inset;
}

Нырните в прозрачность

Играйте с прозрачностью, делая границы transparent и выделяя обводку:

.element {
  border: 2px solid transparent;
}
.element:focus {
  box-shadow: 0 0 0 2px #0078d7;
}

Тестирование, тестирование… 1, 2, 3

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

Полезные материалы

1. CSS Outline Properties – руководство по использованию outline в CSS.
2. border – CSS: Cascading Style Sheets | MDN – подробное описание свойства border на MDN.
3. CSS Pseudo-elements – справочник по работе с CSS псевдоэлементами.
4. CSS border – ресурс, посвящённый работе с односторонними границами.