Як зробити рамку навколо тексту в HTML і CSS

Рамка навколо тексту створюється не окремим HTML-тегом, а CSS-властивостями елемента. HTML відповідає за зміст і структуру блока, а зовнішній вигляд — товщина, колір, скруглення, внутрішні відступи — задається стилями. Тому сучасний варіант відрізняється від старих прикладів із презентаційними HTML-атрибутами.

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

Мінімальний приклад рамки навколо тексту

Для звичайного абзацу достатньо задати клас і застосувати до нього border. Скорочений запис об’єднує товщину, стиль і колір межі.

Наочний приклад. Цей блок уже відмальований браузером із рамкою, внутрішнім відступом і скругленням — тобто читач бачить не лише код, а й його результат.

Такий самий результат можна отримати з класом замість inline-стилів; готовий CSS-код наведено в прикладах нижче, і саме він зручніший для реального сайту.

<p class="note-box">
  Важлива інформація для читача.
</p>

.note-box {
  border: 1px solid #b8b8b8;
  padding: 1rem;
}

Без padding текст буде візуально прилипати до межі, тому внутрішній відступ майже завжди потрібен. Зовнішню відстань до сусідніх блоків задають уже через margin.

З чого складається властивість border

Повна межа будується з трьох характеристик: ширини, стилю та кольору. Їх можна задавати одним рядком або окремими властивостями.

.box {
  border-width: 2px;
  border-style: solid;
  border-color: #208754;
}

Частіше використовують скорочений варіант:

.box {
  border: 2px solid #208754;
}

Окрім solid, існують, наприклад, dashed, dotted і double. Для основного інтерфейсу зазвичай достатньо спокійної суцільної лінії: декоративні стилі краще застосовувати точково, щоб блок не виглядав застарілим.

Як зробити рамку лише з одного боку

Іноді повна рамка перевантажує дизайн. Для цитати, попередження або інформаційного блока достатньо акцентної лінії зліва.

.callout {
  border-left: 4px solid #208754;
  padding: .75rem 1rem;
  background: #f7f7f7;
}

Аналогічно працюють border-top, border-right і border-bottom. Якщо сайт має коректно враховувати напрям письма, у більш універсальній верстці можна використовувати логічні властивості на кшталт border-inline-start.

Скруглення та розміри блока

За скруглення відповідає border-radius. Його значення не варто робити великим лише заради модного ефекту: радіус краще підбирати під загальний дизайн сайту.

.card {
  border: 1px solid #ddd;
  border-radius: .6rem;
  padding: 1.25rem;
}

Якщо блоку задано фіксовану або відсоткову ширину, корисно розуміти модель розмірів. За box-sizing: border-box вказані width і height включають padding та border, що зазвичай робить розрахунки передбачуванішими.

.card {
  box-sizing: border-box;
  width: 100%;
}

На сучасних сайтах фіксовану ширину в пікселях для текстових блоків варто застосовувати обережно: адаптивний контейнер зазвичай краще розтягувати в межах доступного простору.

Чим border відрізняється від outline.

outline теж малює лінію навколо елемента, але не бере участі в розрахунку його розмірів так само, як border. Особливо важливо не плутати декоративну рамку з контуром клавіатурного фокусу.

Наприклад, видаляти outline у посилань і кнопок лише тому, що він «некрасивий», не можна без рівноцінної заміни. Стан :focus-visible допомагає користувачеві клавіатури розуміти, де перебуває фокус.

.button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Для звичайного текстового інформаційного блока використовуйте border, а outline залишайте передусім як інструмент фокусу та додаткового візуального контуру.

Практичні варіанти оформлення.

Один і той самий CSS-механізм можна використовувати для різних типів блоків. Головне — не кодувати зміст лише кольором: попередження або підказка мають бути зрозумілими і з тексту.

.info-box {
  border: 1px solid #cfd8dc;
  border-left-width: 4px;
  padding: 1rem;
}

.warning-box {
  border: 1px solid #d7b86e;
  border-left-width: 4px;
  padding: 1rem;
}

Якщо таких блоків багато, краще винести спільні властивості в один клас, а відмінності — у модифікатори. Так стилі простіше підтримувати, ніж копіювати довгий inline-CSS у кожну статтю.

Типові помилки

Рамка — простий ефект, але саме в простих прикладах часто закріплюються невдалі звички. Перед публікацією варто перевірити кілька моментів:

• чи не використовується застарілий презентаційний HTML замість CSS;
• чи є достатній внутрішній відступ між текстом і межею;
• чи не виходить блок за ширину екрана на мобільному пристрої;
• чи не видалено контур фокусу в інтерактивних елементів;
• чи не повторюються однакові inline-стилі десятки разів.

Для повторюваного оформлення краще використовувати клас у stylesheet шаблона. Inline-стиль допустимий для швидкого тесту, але гірше масштабується й ускладнює подальші зміни дизайну.

Підсумок

Щоб зробити рамку навколо тексту, використовуйте CSS border разом із padding, за потреби додавайте border-radius і продумуйте адаптивну ширину блока. HTML при цьому залишається семантичним і не відповідає за декоративні властивості.

Пов’язані теми: горизонтальні лінії в HTML і CSS та оформлення посилань за допомогою CSS.