Как сделать рамку вокруг текста в 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.