Curved Edges - CSS 2.1

This is a curved box

This text will resize and not break the box.

XHTML

<div class="curved-box">
        
       <
h2>This is a curved box</h2>
            
       <
p>This text will resize and not break the box.</p>
        
</
div>

CSS

.curved-box
    {
    margin
: 10px;
    
width: 298px;
    
background-color: #c3d0d4;
}

.curved-box h2
    {
    background
: #c3d0d4 url(../images/curve_top.png) no-repeat left top;
    
color: #f4fbfd;
    
padding: 10px 15px 5px 15px;
}

.curved-box p
    {
    background
: #c3d0d4 url(../images/curve_bottom.png) no-repeat left bottom;
    
margin: 0px;
    
padding: 5px 15px 10px 15px;
    
text-align: left;
}

Curved Edges - CSS 3

This is a curved box

This text will resize and not break the box.

XHTML

div class="curved-box-css3">
        
    <
h2>This is a curved box</h2>
            
    <
p>This text will resize and not break the box.</p>
        
</
div>

CSS

.curved-box-css3
    {
    width
: 298px;    
    
margin: 10px;
    -
webkit-border-radius: 10px;
    -
moz-border-radius: 10px;
    
border-radius: 10px;
    
background-color: #c3d0d4;
}

.curved-box-css3 h2
    {
    padding
: 10px 15px 5px 15px;    
    
color: #f4fbfd;
}

.curved-box-css3 p
    {
    margin
: 0px;
    
padding: 5px 15px 10px 15px;    
}