<div class="egg_roundbox">
<div class="red w1">
박스 옵션은 class="red w1" 입니다.<br />
w1 에는 width:150px;hieght:120px;이 포합되어 있습니다. height가 지정되지 않으면 내용에 따라 늘어납니다.
 <span class="tm"></span>
 <span class="ml"></span>
 <span class="mr"></span>
 <span class="bm"></span>
 <span class="br"></span>
</div>
</div>

빨간색으로쓴 red 는 green, black, blue 로 바꾸시면 박스 색이 바뀝니다.
파란색으로쓴 w1 은 w1 ~ w3 중에 선택가능하며 각각은 사용자가 크기를 CSS를 수정해서 바꿀 수 있습니다.

미리보기
http://blog.playcast.kr/html/ex6/noname.html




CSS는 아래 와 같습니다.

.egg_roundbox{}
.egg_roundbox .green{position:relative;padding:10px;height:100%;}
.egg_roundbox .green .tm,
.egg_roundbox .green .ml,
.egg_roundbox .green .mr,
.egg_roundbox .green .bm,
.egg_roundbox .green .br{position:absolute;background-image:url(roundbox-border2px-green.png);}

.egg_roundbox .blue{position:relative;padding:10px;height:100%;}
.egg_roundbox .blue .tm,
.egg_roundbox .blue .ml,
.egg_roundbox .blue .mr,
.egg_roundbox .blue .bm,
.egg_roundbox .blue .br{position:absolute;background-image:url(roundbox-border2px-blue.png);}

.egg_roundbox .black{position:relative;padding:10px;height:100%;}
.egg_roundbox .black .tm,
.egg_roundbox .black .ml,
.egg_roundbox .black .mr,
.egg_roundbox .black .bm,
.egg_roundbox .black .br{position:absolute;background-image:url(roundbox-border2px-black.png);}

.egg_roundbox .red{position:relative;padding:10px;height:100%;}
.egg_roundbox .red .tm,
.egg_roundbox .red .ml,
.egg_roundbox .red .mr,
.egg_roundbox .red .bm,
.egg_roundbox .red .br{position:absolute;background-image:url(roundbox-border2px-red.png);}

.egg_roundbox .tm{top:0;left:0px;background-position:0 top;background-repeat:no-repeat;height:10px;width:98%}
.egg_roundbox .ml{top:-10px;left:0;background-position:left 10px;background-repeat: no-repeat;width:10px;height:100%;}
.egg_roundbox .mr{top:-10px;right:0;background-position:-460px 10px;background-repeat: no-repeat;width:10px;height:100%;}
.egg_roundbox .bm{bottom:0;left:0px;background-position:0 bottom;background-repeat:no-repeat;height:10px;width:98%;}
.egg_roundbox .br{bottom:0;right:0;background-position:-460px bottom;background-repeat:no-repeat;height:10px;width:10px;}

/* user options */
/* width 범위는 150px ~ 450px 으로 해주세요*/
/* height 범위는 10px ~ 450px 으로 해주세요*/
.egg_roundbox .w1{width:150px;height:120px;}
.egg_roundbox .w2{width:180px;height:220px;}
.egg_roundbox .w3{width:200px;}
.egg_roundbox .w4{width:450px;height:50px;}
.egg_roundbox{margin-bottom:10px;}


사용된 실제 이미지 입니다.





위 이미지는 PNG파일 임으로 IE6에서 정상적으로 보이게 하려면 "IE6 png" 로 서치 해보세요