Mixa-Blog

Зара дуже модно (та до чого тут мода - це просто гарно!) використовувати в оформленні різні заокруглення. І, як виявляється, можна використовувати їх будь-де, не вдаваючись до графіки, відповідно, не треба паритись, чи не з’їде шосьтамкудисьнетуди в браузері всіх часів і народів - інтернет експлорері
Цей приклад побудовано на основі методики, що застовується в гуглівській пошті.
Отже, першою справою додаємо стилі:

/* стилі для закругленнь */

.inner-box {
padding:1em;
}

.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}

.r10 { margin: 0 10px; }
.r9 { margin: 0 9px; }
.r8 { margin: 0 8px; }
.r7 { margin: 0 7px; }
.r6 { margin: 0 6px; }
.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

/*

можливі комбінації

r3 r1 r1 зверху
r1 r1 r3 знизу

r5 r3 r2 r1 r1 зверху
r1 r1 r2 r3 r5 знизу

r10 r7 r5 r4 r3 r2 r2 r1 r1 r1 зверху
r1 r1 r1 r2 r2 r3 r4 r5 r7 r10 знизу

однак не слід обмежуватись лише цими варіантами,

можливі і інші комбінації та багато інших ефектів.

*/

#rounded-box-3, #rounded-box-5, #rounded-box-10 { margin:1em; }

.inner-box, b { background-color: #43CD80; }

/* зменшуємо відступи по мірі збільшення радіусу заокруглення */
#rounded-box-3 .inner-box { padding: 1em;}
#rounded-box-5 .inner-box { padding: 0.7em 1em;}
#rounded-box-10 .inner-box { padding: 0.4em 1em;}
/* кінець стилів для заокруглень */

Я думаю, якщо ви вже взялися це робити, то зможете і без моїх підказок знайти місце, в якому можна задати власний колір фону
А далі - все просто: дивимося в стилях місце, позначене підказкою “можливі комбінації”, відповідно, оточуємо наш контент відповідною кількістю div’iв з відповідними назвами. В результаті експериментів отримаємо різні кути заокруглення. Наприклад:

<div id="rounded-box-10">
<b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b><div class="inner-box">Наш контент<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dolor diam, condimentum sed, rhoncus in, adipiscing ut, pede. Mauris blandit fringilla quam. Praesent rutrum semper mi. Nam vulputate. Integer eu pede a turpis hendrerit placerat. Nam ac dolor mollis arcu gravida blandit. In a metus. Mauris nulla ipsum, hendrerit ac, porta id, tincidunt ac, enim. Morbi blandit pede non mi. In convallis eros vel leo.</div><b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>
</div>

Отримаємо:

От і все! Єдине, що не завжди можна додати цей код з дівами безпосередньо в пост, але для використання в сайдбарі чи оформлення будь-яких елементів теми дизайну немає ніяких обмежень, окрім вашої фантазії!