Всем привет. Предлагаю сегодня немного поговорить об скругленных уголках. Всем вам известно, что скругление уголков в боксах с помощью css делается через одно место. Меня убивает, что для этого нужно вырезать 8 картинок, делать 8 слоев… и все для чего? Всего лишь для скругления уголков!

Ну да ладно, не об этом речь, а речь о том, что даже когда дизайнеру захотелось зделать оооочень маленькое скругление (смотри картинку выше) в 1 пиксель, нам уже приходится использовать много вложенных <div>, а это печально…

Поэтому сегодня я хочу показать, как с помощью не большого финта ушами (к сожалению сейчас без таких финтов верстать все сложней и сложней) сократить количество вложенных <div> до двух, мало того, я покажу два таких финта :)

Итак, понеслась…

Финт 1.

Он заключается в использовании цвета для фона бокса и подходит в тех случаях когда заливка сплошная, то есть нет никаких border'ов:



html:

<div class="outer">
    <div class="inner">
        box
    </div>
</div>

css:

.outer {background:#999999; margin:0px 1px; padding:1px 0px;}
.inner {background:#999999; margin:0 -1px;}

Принцип работы:

не придумал ничего лучше чем просто нарисовать :)



Финт 2.

Второй способ можно использовать когда цвет заливки и цвет border'а разные:



html:

<div class="outer">
    <div class="inner">
        box
    </div>
</div>

css:

.outer {
    margin:0px 1px; 
    border:1px solid #000000; 
    border-left-width:0; 
    border-right-width:0;
}  
.inner {
    background:#CCCCCC;
    margin:0 -1px; 
    border:1px solid #000000; 
    border-top-width:0; 
    border-bottom-width:0;
}

Принцип работы:

Аналогичен предыдущему, только добавляются border'ы.

Вывод:

С помощью таких вот не хитрых способов можно избавится от неоправданно большой кучи вложенных элементов при верстке таких вот скругленных уголков.