Закругляем углы рамки

РАССМОТРИМ такой КОД:

<div style="border: 5px solid #000fff; background-color: #f7f7f4; padding: 10px; text-align: center; background-position: initial initial; background-repeat: initial initial;"> ТЕКСТ ТЕКСТ ТЕКСТ </div>

Если вставить этот html-код в пост на сайте WordPress, то ПОЛУЧАЕМ вот такую рамку, у которой все углы - острые:

Вставим в выше представленный код атрибут:

border-radius:10px;

При помощи этого атрибута закругляются все углы рамки, причем радиус можно изменять, получим
КОД:

<div style="border: 5px solid #000fff; border-radius: 10px; background-color: #f7f7f4; padding: 10px; text-align: center; background-position: initial initial; background-repeat: initial initial;">ТЕКСТ ТЕКСТ ТЕКСТ</div>

А рамка будет выглядеть вот так:

Если в атрибуте указать ни одно, а четыре значения, то каждый угол можно закруглить по-разному или чередовать закругление углов.

НАПРИМЕР:

Рассмотрим атрибут

border-radius: 0 0 10px 10px;

Здесь указаны радиусы закругления углов в таком порядке:

border-radius: 0(верхний левый) 0(верхний правый) 10px(нижний правый) 10px(нижний левый).

Получим вот такой КОД:

<div style="border: 5px solid #000fff; border-radius: 0 0 10px 10px; background-color: #f7f7f4; padding: 10px; text-align: center; background-position: initial initial; background-repeat: initial initial;">ТЕКСТ ТЕКСТ ТЕКСТ</div>

У рамки будут закруглены только нижние углы:

А теперь изменим атрибут иначе, например, так:

border-radius: 0 10px 0 10px;

Получим КОД:

<div style="border: 5px solid #000fff; border-radius: 10px 0 10px 0; background-color: #f7f7f4; padding: 10px; text-align: center; background-position: initial initial; background-repeat: initial initial;">ТЕКСТ ТЕКСТ ТЕКСТ</div>

А рамка будет выглядеть так:

Теперь у рамки закруглены верхний левый и нижний правый углы.
Экспериментируйте с удовольствием!
Если вам хоть немного помогла эта статья, то нажмите на кнопки СОЦСЕТЕЙ - они перед комментариями. СПАСИБО!