Решил я в очередной раз изобрести велосипед, и предложить свое решение знаменитой вебмастерской проблемы закругленных краев. Существующие варианты, либо содержат очень много строчек 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'а:
6. </div><div class="rcb"><div class="rcb2″></div></div>
7. Если возникнут вопросы, смотрите scource примера.

Еще пример:

 1 <style type="text/css" media="screen">
 2   @import url( round.css );
 3 </style>
 4 
 5 …
 6 
 7 <div style="background:#ccc; width:250px;">
 8 <!-- Div с любыми параметрами — цвет, размер… -->
 9 
10   <div class="rct"><div class="rct2"></div></div><div class="rndc"> <!-- Скруглялка 1 -->
11 
12     Содержание
13 
14   </div><div class="rcb"><div class="rcb2"></div></div> <!-- Скруглялка 2 -->
15 
16 </div>

Скачали аж 220 раз.