Introduction

Link Effects

Box Shadows

Curves

IMC Home Page

Curves (continued)

Curves and Images

Images can pose special problems when used in conjunction with curved divs. The image with the stripes at the top of this page appears to have curved corners when viewed in any browser except Internet Explorer. It really has square corners. The curve effect is caused by how the image is used within the div.

Example imageThe image on the left is 200 pixels wide and 100 pixels high. There is nothing particularly special about it.

 

 

Metal image example

When the image is placed within a division that is 200 pixels wide, 100 pixels high, and has rounded corners with a red border the image corners extend out of the curved borders.

 

 

A similar div can be constructed that has one significant difference. The image is not inserted into the div. Instead it is used as a background for the div. The curved effect is retained.

 

 

 

< Return to Page 1 >