Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

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

Короткий ответ

У каждой стороны своё свойство: 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 — Внутренний отступ между содержимым и рамкой элемента.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.