Как сделать рамку только с одной стороны
Короткий ответ
У каждой стороны своё свойство: border-top, border-right, border-bottom, border-left:
<blockquote style="margin: 0; padding: 8px 16px; border-left: 4px solid royalblue; background: aliceblue;">Simple things should be simple.</blockquote>Значение такое же, как у border: толщина, стиль и цвет.
Линия под заголовком
<h3 style="padding-bottom: 6px; border-bottom: 2px solid gold;">Latest news</h3>Убрать одну сторону
Можно задать рамку со всех сторон и убрать лишнюю:
<div style="border: 2px solid silver; border-top: none; padding: 8px;">No top border</div>Логические стороны
border-inline-start — это «рамка в начале строки»: слева для английского, справа для арабского и иврита. Если сайт переводится на языки с письмом справа налево, используйте логические свойства.
Частая ошибка
Рамку с одной стороны пытаются нарисовать как border: 0 0 2px 0 — так не работает: border не принимает четыре значения. Четыре значения бывают у border-width: border-width: 0 0 2px; border-style: solid;.
Функции из этого ответа
- border — Рамка вокруг элемента: толщина, стиль и цвет в одном свойстве.
- border-radius — Скругляет углы элемента.
- padding — Внутренний отступ между содержимым и рамкой элемента.