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

Мой вариант использует прозрачный PNG (или Gif для IE6). Благодаря этому, можно скруглять что угодно — блоки разных цветов, картинки, бекграунды. Требуется только один PNG, для всех четырех углов и блоков разного цвета, что ускоряет время загрузки. Вообщем смотрите пример.

Установка:

1. Прицепите как-нибудь к нужной странице  round.css .
2. Пропишите в round.css пути к картинкам: roundwhite.gif и roundwhite.gif .
3. Перекрасьте их в фоновый цвет вашей страницы, если он не белый.
4. Чтобы скруглить любой DIV пропишите в его начале:

   <div class="rct"><div class="rct2"></div></div><div class="rndc">

5. И в конце DIV'а:

   </div><div class="rcb"><div class="rcb2"></div></div>

6. Если возникнут вопросы, смотрите scource примера.

Еще пример:

<style type="text/css" media="screen">
@import url( round.css );
</style>

...

<div style="background:#ccc; width:250px;">
//Div с любыми параметрами - цвет, размер...

<div class="rct"><div class="rct2"></div></div><div class="rndc"> //Скруглялка 1

Содержание

</div><div class="rcb"><div class="rcb2"></div></div> //Скруглялка 2
</div>

Уже успели скачать 1413 раза.