There are many methods that can be used to create a flexible-width, round-cornered box. The method described in this lesson uses four individual corner images. These images should not be placed in the HTML code because they are purely presentational. Ideally, they should be applied as background images using CSS. The top-left image will be applied as a background image to the <div> container and the top-right image will be applied to the <h2> element. The bottom-left image will be applied to the last <p> element inside the box. This <p> element will be given a .furtherinfo class to differentiate it from other paragraphs in the box. The bottom-right image will be applied to a specific instance of the <a> element.
|