Скругленный контурный блок (border-radius) с тенью box-shadow

Особенность: в скруглении используется свойство border-radius, для тени - box-shadow и его вариации для популярных браузеров.
Плагин PIE.htc - для работы скругления в IE.

Плюсы:

Минусы:

Скачать

DEMO

HTML

 <div class="rounded"></div>

CSS

.rounded {
	width: 300px;
	height: 225px;
	border: 0;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;	
	behavior: url(PIE.htc);
	background: url(images/air.jpg) no-repeat;
  /*параметры тени: <сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>*/
  box-shadow: 0 0 4px #b0b0b0; /* Параметры тени для IE9 и Opera*/
  -moz-box-shadow: 0 0 4px #b0b0b0; /* Для Firefox */
  -webkit-box-shadow: 0 0 4px #b0b0b0; /* Для Safari и Chrome */
  filter: progid:DXImageTransform.Microsoft.shadow(direction=0, color=#b0b0b0, strength=4); /* для IE6,7,8; direction - уголсмещения тени от 0 до 359 */
  /*filter: progid:DXImageTransform.Microsoft.dropshadow(offX=4, offY=4, color=#b0b0b0);*/ /* для резкой тени */
}

PLUGINS

  • PIE.htc
  • Ссылка для проверки последней версии плагина
  • Ссылка статья на htmlbook.ru касательно тени