Для створення рамки навколо тексту використовуйте стильове властивість 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>