PHP & JavaScript Room :: 設置サンプル

<style type="text/css">
/* curve height, background image */
.myClassName .t,
.myClassName .b,
.myClassName .b b,
.myClassName .t b {
    height:10px;
    background:transparent url(/content/img/css/ffffffeeeeeecccccc1101600.png) no-repeat 0 0;
}
/* inner color, border color, border width */
.myClassName .c {
    background:#eeeeee;
    border-color:#cccccc;
    border-left-width:1px;
    border-right-width:1px;
}
/* surrounding margins (optional) */
.round {
    margin-bottom:5px;
}
.round .c {
/* inner content padding */
    padding:0 10px;
    border-top:0;
    border-bottom:0;
    border-style:solid;
}
.round .t,
.round .b,
.round .t b,
.round .b b {
    display:block;
    overflow:hidden;
}
.round .t b, .round .b b {
    float:right;
    width:50%;
}
.round .t .r {
    background-position:top right;
}
.round .b .r {
    background-position:bottom right;
}
.round .b {
    background-position:bottom left;
}
.round .b r{
    clear:both;
    display:block;
    overflow:hidden;
    height:0;
}
</style>
<script type="text/javascript">
    var makeRound=function(){
        var els=document.getElementsByTagName('div');
        for(var i=0; el=els[i]; i++){
            if(el.className.indexOf('round')>-1 
            && el.firstChild 
            && el.firstChild.className!='t'){
                el.innerHTML='<b class="t"><b class="r"></b></b><div class="c"><b class="br"></b>'+el.innerHTML+'<b class="br"></b></div><b class="b"><b class="r"><!----></b></b>';
            }
        }
    }
    window.onload=makeRound;
</script>

<div class="round myClassName">
...content...<br>...content...<br>...content...
</div>

<!-- works with both padding and margins -->
<div class="round myClassName" style="width:50%;">
    <div style="padding:10px;">...content...<br>...content...<br>...content...</div>
</div>