Для створення рамки навколо тексту використовуйте стильове властивість border, додаючи його до відповідного селектору. Наприклад, якщо для тексту застосовується тег <p>, то для нього треба встановити наступний стиль.
P {
border: 1px solid red; /* Товщина рамки в пікселях, тип межі (в даному випадку суцільна лінія) і колір лінії */
padding: 5px; /* Відстань від тексту до рамки */
}
Застосування властивості border до текстового абзацу показано в прикладі 1.
Приклад 1. Рамка навколо абзацу
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка навколо тексту</title>
<style>
p {
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p>Немає страшнішого звіра в наших лісах, ніж розлючений заєць-мутант. Ви бачили, які в нього зуби? О, навіть ведмідь боїться цих зубів! А, як відомо, ведмеді більше нічого не бояться.</p>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Вигляд рамки навколо абзацу
Слід враховувати, що в тексті може бути кілька абзаців і навколо кожного тоді виникне рамка. У подібних випадках краще скористатися тегом <div>, для якого потрібно встановити стиль. А текст додати вже всередину цього контейнера (приклад 2).
Приклад 2. Рамка навколо шару
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рамка навколо тексту</title>
<style>
.outline {
border: 1px solid red;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="outline">
<p>Перед тим як вбити героя, антагоніст обов'язково розповідає йому про все свої злодіяння, щоб створити необхідну паузу. Зрозуміло, будь-який протагоніст досить уміло використовує даний час проти самого лиходія.</p>
<p>З цього правила є лише один виняток. Герой може не метушитися, тягнути час, і взагалі нічого не робити, тому що на допомогу прийдуть його друзі.</p>
</div>
</body>
</html>