mex

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

Дерганья в сторону яваскриптовых методов, вроде этого, тоже не особо радуют глаз.

Можно было бы сделать при помощи псевдоэлементов :before и :after, если бы не одно НО — вся эта красота совершенно не работает в антибраузере Ослеге ИЕ. Ни в старом, ни в новом. Зато, существует метода, как нагнуть ИЕ, не ломая красоты для Браузеров

Итак, ближе к телу. Надо получить такое:

Красиво набираем:

	
<div class="textit">
	После жосцких садомазохистических экзерсисов со шпатлевкой, 
	шпателем и потолком, процесс второй и третьей покраски, прошел 
	на пять с плюсом...
</div> 
	

После чего, садимся и ваяем css для браузеров. Чтобы не делать кучу тяжелых картинок, рамку делаем border'ом

	
div.textit {
	border:solid 1px #FFF;
	padding:10px;
}
	

Уголки, сделанные 4-мя небольшими картинками размером 11х11 пикселей, впуливаем, используя :after и :before.

	
.textit:before {
	content:url(i/tl.gif);
	background:url(i/tr.gif) no-repeat right 0;
	display:block;
	height:11px;
	margin:-11px -11px 0;
}

.textit:after {
	content:url(i/bl.gif);
	background:url(i/br.gif) no-repeat right 0;
	display:block;
	height:11px;
	margin:0 -11px -11px;
}
	

Все. В браузерах заработало. Осталось только запустить красоты в осликах (ИЕ). Для этого придется заюзать expression, который работает только в ИЕ. Причем, очень желательно разделить css для всех от css для фикса неполноценности эксплореров. Имеем (насильные переносы знаком »):

	
.textit {
	zoom:1;
	behavior:expression(!this.isInserted==true ? »
	this.isInserted=(this.innerHTML = '<span »
	class="top_round"><img src="i/tl.gif" alt="" /> »
	</span>' + this.innerHTML + '<span »
	class="bottom_round"><img src="i/bl.gif" alt="" /> »
	</span>') : '');
}
.textit span {
	height: 11px;
	display: block;
	position:relative;
}

.textit span.top_round {
	background: url(i/tr.gif) no-repeat right 0;
	margin:-11px -11px 0;
}

.textit span.bottom_round {
	background: url(i/br.gif) no-repeat right 0;
	margin:0 -11px -11px;
}
	

Вот теперь заработало и в ИЕ.

Работающий пример

Конечно, сий метод, имеет кое-какие недостатки, и в некоторых случаях не подходит для решения, но первое — таких случаев не очень много, второе — на то человеку и дан мозг, чтобы решить, когда, чем пользоваться.

P.S. Еще неплохие примеры использования expression