Бордеры и скруглённые углы

Бордеры — самая объёмная по числу свойств группа. Помимо основных border-inline-* и border-block-*, у них есть отдельные подсвойства для width, style и color, плюс свой синтаксис у скруглённых углов.

Основные бордеры

Шорткат типа border-inline-start: 4px solid crimson — прямой эквивалент border-left: 4px solid crimson для горизонтального LTR-текста. Разница в том, что логический сам «разворачивается» при смене направления:

.section-title {
  border-inline-start: 4px solid crimson;
  padding-inline-start: 12px;
}

Полный набор основных свойств:

• border-inline-start, border-inline-end — стороны бордера по inline-оси.
• border-block-start, border-block-end — стороны по block-оси.
• border-inline, border-block — шорткаты для двух сторон сразу. border-inline: 1px solid #ccc ставит одинаковый бордер слева и справа в LTR.

Подсвойства width, style, color

Если нужно поменять только толщину или только цвет:

• border-inline-start-width, border-block-end-width, border-inline-width и т. д. — для толщины.
• border-inline-start-style, border-block-style и т. д. — для типа линии.
• border-inline-start-color, border-block-end-color и т. д. — для цвета.

Запоминать наизусть весь список не нужно — имена строятся регулярно (ось × сторона × свойство), и редактор подскажет автодополнением.

Скруглённые углы

У border-radius логика другая — нужно одновременно указать block- и inline-сторону для каждого угла. Шаблон имени — border-{block-сторона}-{inline-сторона}-radius:

Читается как «сначала block, потом inline». Например, border-end-start-radius — это нижне-левый угол в горизонтальном LTR-тексте (block-end = низ, inline-start = лево).

У скруглённых углов нет шорткатов вида border-start-radius. Если нужно скруглить два угла с одной стороны — пишем по два свойства:

.tab {
  border-start-start-radius: 8px;
  border-start-end-radius: 8px;
  /* верхняя пара углов скруглена для LTR; в RTL она же остаётся вверху */
}