Текст, подчеркнутый пунктиром

<span style="border-bottom: 2px dashed red;">Текст, подчеркнутый пунктиром</span>

---

Текст, подчеркнутый точками

<span style="border-bottom: 3px dotted lime;">Текст, подчеркнутый пунктиром</span>

---

Текст, подчеркнутый двойной чертой

<span style="border-bottom: double red;">Текст, подчеркнутый двойной чертой</span>

---

Текст, окаймленный разноцветным пунктиром

<span style=border-style:dashed; border-top-color:blue; border-bottom-color:red; padding:5px;> Текст </span>

---

Текст в двойной рамке

<span style="border-style: double; padding:3px;">Текст в двойной рамке</span>

---

Цветной текст в двойной цветной рамке

<span style="border-style: double; color: green; padding:3px;"><span style="color:blue;">Цветной текст в двойной цветной рамке</span></span>

---

Ваш текст в объемной 3D-рамке

<span style="border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст в объемной 3D-рамке</span>

---

На заметку:

Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и получим (на примере выше):

то бишь рамку на всю ширину поста.

Размеры блока div задаются атрибутами:

div style=width:200px; height:50px;

где width:200px; - ширина блока 200 пикселей,

height:50px; - высота блока 50 пикселей

Получим:

<div style="width:200px; height:50px; border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст </div>