Блок с закругленными углами

[Rootical]

Возник такой вопрос. Нужно сделать блок с закругленными углами, сзади которого располагается разный фон. В одном случае, к примеру, фотография, во втором просто цвет. Делать разные изображения углов, в зависимости от страницы уж не хочется( Тем более, что таких блоков несколько, да и как-то мясисто это.

Надеюсь, что есть грамотный альтернативный способ. Не поделитесь вариантами решения, люди добрые?

http://nicothin.ru/zakruglennye-ugly-v-ideale.html

Вот интересный способ, есть ещё варианты?

[SelenIT]

Ширина таких блоков фиксирована?

[Rootical]

Те, что мне нужны в большинстве своем могут тянуться вниз. В примере выше это условие соблюдено

[Rootical]

А если ещё тень нужна, то я совсем в тупике...

[Rootical]

Очень хороший вариант. И простой. Радиус легко изменяется. Прям как на гмэйле.

CSS:

/*BOX*/
#box-catalog { 
float: left;
width: 10.8125em;
margin: 2.3125em 2.3125em 2.3125em 2.3125em; 

}

.inner-box {
 padding:1em;
}

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

.r5 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }

h3 {margin: 0; padding: 0; font-size: 1.125em;}



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

#box .inner-box { padding: 0.7em 1em;}

/*END BOX*/

HTML:

<div id="box-catalog">
<b class="r5"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b>
<div class="inner-box">
<h3>Каталог</h3>
<a class="link" href="/">Акции</a>
</div>
<b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r5"></b>

На контент не обращаем внимания - рабочий, так сказать. Из минусов - ошибки валидности, но это не такая большая проблема.

Edited December 30, 2008 by Rootical