Как я могу создать прямоугольник с закругленными углами без использования CSS3?

Question

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

Мой код CSS:

background-image: url('/images/content/center/top.png'), url('/images/content/center/grad.png'), url('/images/content/center/cont.png');
background-position: top center, bottom center, center center;
background-repeat: no-repeat, no-repeat, no-repeat;

И это выглядит так:

Я должен сделать центрированную линию 1px, чтобы заполнить свободное пространство (с помощью CSS). Мне не разрешено использовать box-radius (CSS3) из-за IE.

Как мне это сделать?

Answer 1

Я не уверен, какая у вас разметка, если бы мне пришлось поддерживать все браузеры, я бы выложил свой код следующим образом.

<div class="container">
   <div class="top"></div>
   <div class="middle">ALL your text goes in here</div>
   <div class="bottom"></div>
</div>

И css вот так

.container{
   width:300px;
}
.top, .bottom{
   width:100%;
   height:30px;
   display:block;
   float:left;
   background-repeat:no-repeat;
}
.top{
   background-image:url;
   }
.bottom{
   background-image:url;
   }
.middle{
   width:100%;
   display:block;
   background-image:url;
   background-repeat:repeat-y;
}

Answer 2

Фон вашего центра не повторяется:

background-repeat: no-repeat, no-repeat, no-repeat;
                              ^^^^^^^^^

Измените его на repeat-y и посмотрите, что произойдет:

background-repeat: no-repeat, repeat-y, no-repeat;

Кроме того, вы делаете знаете, это не будет работать вообще с IE8 и ниже?