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

Чтобы добавить рамку вокруг текста в CSS, можно использовать свойство border. Например, если вы хотите добавить рамку вокруг абзаца, используйте следующий CSS:

p {
  border: 1px solid #ccc; /* устанавливает толщину, стиль и цвет рамки */
  padding: 10px; /* добавляет отступ внутри рамки */
}

Этот код устанавливает рамку с толщиной 1 пиксель с тонкой сплошной линией вокруг каждого абзаца на странице. Цвет рамки установлен как серый (#ccc). Свойство padding определяет размер отступа внутри рамки.

Вы также можете использовать другие значения для свойства border, например, dotteddasheddouble и т.д. Чтобы увеличить толщину рамки, увеличьте значение числа в пикселях.

p {
  border: 3px dashed #f00; /* устанавливает широкую пунктирную рамку красного цвета */
  padding: 20px; 
}

Иногда возникает необходимость обводить только некоторый текст, например, заголовок или фрагмент текста, в этом случае можно обернуть его в тег <span> и добавить рамку вокруг этого тега:

h2 span {
  border: 2px dotted #00f; /* устанавливает пунктирную рамку синего цвета вокруг заголовка */
  padding: 10px;
}
<h2><span>Заголовок с рамкой</span></h2>
реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать рамку вокруг текста в css

Наш специалист свяжется с вами в ближайшее время и уточнит детали