Любой, кто занимается версткой, так или иначе сталкивается с задачей создать блок со скругленными углами посредством CSS.

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

Такой способ имеет не мало недостатков, например такие как:

1. для последующего изменения фона данного блока необходимо с помощью графической программы менять цвета уголков
2. для изменения размера блока и радиуса углов так же необходимо менять размеры углов с помощью графической программы

Ниже я покажу, как можно решить данную задачу с использованием только CSS.

Итак,  мы имеем:  CSS, без единой картинки, без Javascript, с анти-аллиасингом (то есть плавные переходы), прозрачные углы (то есть в фоне может быть что угодно), тянущийся по высоте и ширине и, конечно же, кроссбраузерный метод.

HTML:

<div>
            <div>
                <em><b>&bull;</b></em>
                <em><b>&bull;</b></em>
            </div>

            <div>
                Текст
            </div>

            <div>
                <em><b>&bull;</b></em>
                <em><b>&bull;</b></em>
            </div>

        </div>

Здесь класс box используется чисто в эстетических целях (к примеру js цепляется именно к нему, то есть это означает, что блок будет со скругленными углами), никаких css-свойств на него не навешивается.
CSS:

div.w60
{
	width: 60%;
	margin: 0 auto;
}	

	div.box-c
	{
		height:20px;
		margin: 0 20px;
		position: relative;
		background: #C32300;
	}

		div.box-c em b
		{
		   position:absolute;
		   font:150px Arial;
		   line-height:40px;
		   font-weight:normal;
		}

		.ctl, .cbl, .ctr, .cbr
		{
		   z-index:11;
		   width:20px;
		   height:20px;
		   color:#C32300;
		   overflow:hidden;
		   position:absolute;
		   background:transparent;

		}

		.ctl {top:0; left:-20px;}
		.cbl {bottom:0; left:-20px;}
		.ctr {top:0; right:-20px;}
		.cbr {bottom:0; right:-20px;}

		.ctl b {left:-8px;}
		.ctr b {left:-25px;}
		.cbl b {left:-8px; top:-17px;}
		.cbr b {left:-25px; top:-17px;}

	div.box-inner
	{
		padding: 0 20px;
		background: #C32300;
	}

Пример: