درس CSS: عمل حواف دائرية للصندوق

<!-- box -->
    <div id="box">
            
            <!-- boxTop -->
            <div id="boxTop"></div>
                
                 <!-- content -->
                 <div id="content">
                           .. هنا نضع المحتويات ..
                </div>
                <!-- /content -->
        
        <!-- /boxBottom -->
            <div id="boxBottom"></div>
                
    </div>
    <!-- /box -->

#box { margin: 0 auto; width: 450px; background: #fff; }
        
    #boxTop {
        width: 450px;
        height: 7px;
        background: url(boxR.gif) no-repeat top;
    }
        
    #boxBottom {
        width: 450px;
        height: 7px;
        background: url(boxR.gif) no-repeat bottom;
    }
        
    #box #content {
        padding: 15px;
    }

<!-- box -->
    <div id="box">
   
        <!-- boxTopLeft -->
        <div id="box-top-left">
                    
                        <!-- boxTopRight -->
                    <div id="box-top-right">
                        
                            <!-- boxBottomLeft -->
                            <div id="box-bottom-left">
                        
                                    <!-- boxBottomRight -->
                                    <div id="box-bottom-right">
                             
                                        <div id="content">
                                    
                                            .. هنا نضع المحتويات ..
                                
                                    </div>
                                    <!-- /boxBottomRight -->
                                </div>
                            <!-- /boxBottomLeft -->
                        
                        </div>
                        <!-- /boxTopRight -->
                
        </div>
        <!-- /boxTopLeft -->
                
    </div>
    <!-- /box -->
    </div>

     #box { margin: 0 auto; width: 450px; }
       
    #box-top-left {
        background: #ffffff url(NorTopLeft.gif) no-repeat;
        width: 100%;
    }
       
    #box-top-right {
        background: url(NorTopRight.gif) no-repeat top right;
        width: 100%;
    }
       
    #box-bottom-right {
        background: url(NorBottomRight.gif) no-repeat bottom right;
        width: 100%;
    }
       
    #box-bottom-left {
        background: url(NorBottomLeft.gif) no-repeat bottom left;
        width: 100%;
    }
       
    #box #content {
        padding: 15px;
    }

<div id="box">  
            
                <!-- topRight and topLeft -->
            <div class="topRight"><div class="topLeft"></div></div>
                <!-- /topRight and topLeft -->
            
                <!-- allContent -->
             <div class="allContent">
                
                        <!-- centerRight -->
                        <div class="centerRight"><div class="centerLeft">
                    
                    <!-- content -->
                        <div id="content">
                    
                            .. نضع المحتويات هنا ..
   
                        </div>
                        <!-- /content -->
                    
                        </div></div>
                        <!-- /centerRight -->
                
            </div>
            <!-- /allContent -->
            
            <!-- bottomRight and bottomLeft -->
            <div class="bottomRight"><div class="bottomLeft"></div></div>
            <!-- /bottomRight and bottomLeft -->
            
    </div>

<!-- box -->
    <div id="box">  
            
        <!-- topRight and topLeft -->
            <div class="topRight"><div class="topLeft"><div class="topCenter"></div></div></div>
        <!-- /end:topRight and topLeft -->
            
        <!-- allContent -->
        <div class="allContent">
                
            <!-- centerRight -->
            <div class="centerRight"><div class="centerLeft">
                    
                <!-- content -->
                <div id="content">
                    
                                .. نضع المحتويات هنا ..
                            </div>
                            <!-- /content -->
                    
                        </div></div>
                        <!-- /centerRight -->
                
            </div>
            <!-- /allContent -->
            
            <!-- bottomRight and bottomLeft -->
        <div class="bottomRight"><div class="bottomLeft"><div class="bottomCenter"></div></div></div>
            <!-- /bottomRight and bottomLeft -->
            
    </div>
    <!-- /box -->

#box { /* مهم للتحكم بعرض الصندوق */
        width: 90%;
        margin: 0 auto;
        color: #333333;
    }
    #content { /* مهم لترتيب المساحات الجانبية للنص */
        margin: 0 -25px 0 10px;
        padding: 1px 15px;
        background: #fff;
    }
        
    #box .topCenter , #box .topLeft ,#box .bottomCenter , #box .bottomLeft { height: 37px; }
        
    #box .topRight {
        background: url(topRight.png) no-repeat right top;
    }
    #box .topLeft {
        background: url(topLeft.png) no-repeat left top;
        margin-right: 37px;
    }
    #box .topCenter {
        background: url(topCenter.png) repeat-x top;
        margin-left: 37px;
    }
    #box .bottomCenter {
        background: url(bottomCenter.png) repeat-x bottom;
        margin-left: 37px;
    }
    #box .centerRight {
        background: url(centerRight.png) repeat-y right top;
    }
    #box .centerLeft {
        background: url(centerLeft.png) repeat-y left top;
        margin-right: 34px;
    }
    #box .bottomRight {
        background: url(bottomRight.png) no-repeat right bottom;
    }
    #box .bottomLeft {
        background: url(bottomLeft.png) no-repeat left bottom;
        margin-right: 37px;
    }