Создание простых рамок с использованием CSS

Демонстрация работы простых рамок CSS, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<p>Цельная</p>
<p>Подчеркиваниями</p>
<p>Точками</p>
<p>Углубленная</p>
<p>Приподнятая</p>
<p>Двойная</p>
<p>Внутренняя</p>
<p>Внешняя</p>

CSS

p {display: inline-block; padding: 10px; border-radius: 20px}
p:nth-child(1) {border: 5px solid #999;} 
p:nth-child(2) {border: 5px dashed #999;}
p:nth-child(3) {border: 5px dotted #999;}
p:nth-child(4) {border: 5px groove #999;}
p:nth-child(5) {border: 5px ridge #999;}
p:nth-child(6) {border: 5px double #999;}
p:nth-child(7) {border: 5px inset #999;}
p:nth-child(8) {border: 5px outset #999;}