Сделаем рамку с заголовком и закругленым уголком.
В лесу родилась елочка, В лесу она росла, Зимой и летом стройная, Зеленая была. Метель ей пела песенку: "Спи, елочка, бай-бай!" Мороз снежком укутывал: "Смотри, не замерзай!" Трусишка зайка серенький Под елочкой скакал. Порою волк, сердитый волк Рысцою пробегал. Чу! Снег по лесу частому Под полозом скрипит; Лошадка мохноногая Торопиться, бежит. Везет лошадка дровенки, А в дровнях старичок, [мужичок] Срубил он нашу елочку Под самый корешок. Теперь она, нарядная, На праздник к нам пришла И много, много радости Детишкам принесла.
Для этого понадобяться 2 рисунка, один для фона заголовка и рисунок уголка
[показать] - Фоновый рисунок заголовка высотой 25 пикселей и шириной в 1 пиксель
[показать] - рисунок уголка ширина и высота по 25 пикселей
Что бы сделать такую рамку понадобится 3 <DIV>. Один общий который задаст ширину рамки, один для заголовка рамки и див в котором разместится текст
Упрощенно это выглядит так
Полный вариант выглядит так. Для удобства я пронумеровал дивы 1,2,3
Первый див задает общую ширину рамка width 600px и добавляет бордер к рамке border: solid 1px #00000f;
Обратите внимание на то что высота второго дива задана явно и составляет height: 25px столько же сколько и высота фонового рисунка который задается в background
Остальные стили задают цвет фона, размер шрифта и тд.
Что бы скруглить уголок нужно поверх угла дива вывести рисунок скругленного уголка. Что бы вывести рисунок в нужном нам месте нужно к рисунку добавить стиль position: relative и параметрами top, left задать нужное нам место
Код с скругленым уголком выглядит вот так
Что бы не мучаться с видом рамки уберите галочку с "Сохранять переводы строк в тексте."
Что бы текст выводился со всеми пробелами и переносами строк заключите его в теги <pre></pre>