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;    
}