Как сделать рамку вокруг текста в html

• В первую очередь необходимо внести текст внутрь подходящего тега html, например параграфа <p></p>
• Затем указать данному параграфу класс для удобства, например text-with-border
• И добавить такой код в файл стилей:

.text-with-border {
  border: 3px dotted red;
}

Для создания рамки вокруг текста в HTML можно также воспользоваться CSS, но прям в HTML коде:

<div>
    <span style="border: 2px solid black;">Шрифт</span>
</div>

И уже менять свойства рамки можно прям в HTML коде

Результат

Рамку задают в CSS свойством border. В нём три значения: толщина, стиль и цвет.

<p class="framed">Текст в рамке</p>

<style>
  .framed {
    border: 2px solid #333;
    padding: 10px 16px;
  }
</style>

padding отодвигает текст от рамки. Без него буквы прилипают к линии.

Рамка по ширине текста

Абзац <p> занимает всю ширину страницы, и рамка растягивается вместе с ним. Чтобы рамка была по размеру текста:

.framed {
  display: inline-block;
  border: 2px solid #333;
  padding: 6px 12px;
}

Или width: fit-content;, если блок должен остаться на отдельной строке.

Рамка вокруг слова в строке

<p>Нажмите кнопку <span class="key">Enter</span>, чтобы продолжить.</p>

<style>
  .key {
    border: 1px solid #999;
    border-radius: 4px;
    padding: 0 6px;
  }
</style>

Стили линии

border: 2px solid #333;   /* сплошная */
border: 2px dashed #333;  /* пунктир */
border: 2px dotted #333;  /* точки */
border: 4px double #333;  /* двойная */

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

border: 2px solid #4a90e2;
border-radius: 8px;

border-radius: 999px даёт полностью скруглённые края, как у таблетки.

Линия только с одной стороны

.quote {
  border-left: 4px solid #4a90e2;
  padding-left: 12px;
}

Так оформляют цитаты и заметки.

Рамка с подписью

<fieldset>
  <legend>Важно</legend>
  Текст внутри рамки с заголовком.
</fieldset>

<fieldset> рисует рамку, а <legend> встраивает подпись в верхнюю линию.

Обводка самих букв

border рисует рамку вокруг блока. Чтобы обвести контур каждой буквы, используют -webkit-text-stroke:

h1 {
  color: white;
  -webkit-text-stroke: 1px black;
}

Свойство с префиксом -webkit- работает во всех современных браузерах, включая Firefox.

border и outline

outline тоже рисует линию вокруг элемента, но не занимает места и не сдвигает соседей. Его используют для подсветки фокуса. Для оформления текста подходит border.

Рамки, отступы и блочную модель разбирают в бесплатном курсе «Основы HTML и CSS».