Как проще это сделать

Есть бокс с закругленными краями.
Подскажите, как проже всего и правильнее его в HTML описать.
Как я понимаю будет всего 4+4 рисунка - углы и однопискельные линии с позрачностью.
[attachment=2701:attachment]
Получается таблица 3х3. Может как-то можно проще и правильнее сделать? Или и так нормально? Можно ли сделать линии не риснуками, а таблицей, но чтобы она не стала 5х5?

Попробуй [Only registered and activated users can see links. Click Here To Register...], описанную в «Техногрете» Лебедева. Вполне подойдет для твоего случая

Я делал на [Only registered and activated users can see links. Click Here To Register...] так:

HTML:

Код:

---

*
<div class="box">
 *<div class="left_box"> * * * *
 * *<div class="right_box">
****
 * * *<div class="top_box">
 * * * *<div class="box_container1"> * *
 * * * * *<div class="box_container">
 * * * * * *
 * * * * * * * *
 * * * * * * * </div>
 * * * * * * * *</div>
 * * * * * * * *
 * * * * * * *</div>

 * * *
 * *****<div class="box_content">
 * * *
 * * * * * * * * * * *
 * * * * * * * * * * * * * Содержимое бокса
 * * * * * * * * * * *
 * *****</div>
 * * * * *
 * * *<div class="bottom_box">
 * * * *<div class="box_container1"> * *
 * * * * *<div class="box_container">
 * * * * * *
 * * * * * * * *
 * * * * * * * </div>
 * * * * * * * *</div>
 * * * * * * * *
 * * * * * * *</div>
 * * *
 * *</div>
 *</div>
</div>

---

CSS:

Код:

---

/*Блоки*/

.box{ background:#fffceb; }
.top_box{background:url(/images/top_box.gif) repeat-x; height:20px; }
.left_top_box{background:url(/images/left_top_box.gif); width:20px; height:20px; float:left;}
.box_container1{float:left; width:100%; margin-right:-20px;}
.box_container{margin-right:20px;}
.box_header{ text-align:center;}
.right_top_box{background:url(/images/right_top_box.gif); width:20px; height:20px; float:right;}

.left_box{background:url(/images/left_box.gif) repeat-y left;}
.right_box{background:url(/images/right_box.gif) repeat-y right;}

.bottom_box{background:url(/images/bottom_box.gif) repeat-x; height:20px;}
.left_bottom_box{background:url(/images/left_bottom_box.gif); width:20px; height:20px; float:left;}
.box_header{ text-align:center; font-size:.9em; color:#000; font-weight:bold; padding-top:3px;}
.right_bottom_box{background:url(/images/right_bottom_box.gif); width:20px; height:20px; float:right;}

.box_content{margin:10px 10px 10px 10px; position:relative;}

---

Ого кода!
Я уже впринципе таблицами сделал, раза в 3 получилось меньше.

Лучший вариант - табличный.