Rounded corners using CSS

This simple demonstration of a box with rounded corners works in modern browsers (tested in Mozilla 1.x, Opera 7.x, and IE 5.5. The designed works in Netscape 4.x by creating a box with square holders (the images are hidden).

All that is need are for graphics for each of the corners, which are then positioned absolutely within a containing box. The other children of that box can be padded to create the illusion that they are indeed contained by the curved corners.

There is a slight display problem in IE which can reveal the edge of the box’s background around the top-right, bottom-left, and bottom-right images. Therefore, the rounded corner part of the images should be 1 pixel away from the edge of the graphic, and most will the three mentioned images will need a negative 1-pixel position.

The CSS for this example follows the box.

In Gecko-based browser, the images would not be needed if the -moz-border-radius is used. —saila.com

The CSS

/* applies only to Gecko-based browser, and in which case,
   only this ruleset is needed
#box {  
 background: #EEE; /* example only */ 
 -moz-border-radius: 40px; */
}
*/ 

#box {  
 background: #EEE; /* example only */ 
 /* -moz-border-radius: 40px; *//* applies only to Gecko-based browser, 
 if used none of the following rules are needed */
 position: relative;  
 width: 100%; /* IE needs a numerical value */ 
 /*/*//*/ border: none; /* need for solid box in NN4 */
} 
 
#box p {  
 position: relative;  
 z-index: 2; /* allows text to write over text */ 
 padding: 0 1em; /* example only, adjust per curve of corner */
} 

#box *.first { padding-top: 1em; } /* example only, adjust per curve of corner */
#box *.last { padding-bottom: 1em; } /* example only, adjust per curve of corner */

#topleft, #bottomleft, #topright, #bottomright {  
/*/*//*/ display: none; /* hide from NN4 */
 position: absolute; 
 z-index: 1;  
 padding: 0; /* example only, need to reset curve adjustment */
} 
 
#topleft { 
 top: 0; 
 left: 0; 
} 
 
#bottomleft { 
 left: 0; 
 bottom: -1px; /* needed for IE */
} 
 
#topright { 
 top: 0; 
 right: -1px; /* needed for IE */ 
} 
 
#bottomright { 
 right: -1px; /* needed for IE */
 bottom: -1px; /* needed for IE */ 
}