РАССМОТРИМ такой КОД:
<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>
А рамка будет выглядеть так:
Теперь у рамки закруглены верхний левый и нижний правый углы.
Экспериментируйте с удовольствием!
Если вам хоть немного помогла эта статья, то нажмите на кнопки СОЦСЕТЕЙ - они перед комментариями. СПАСИБО!
Пожелайте успехов и мне!