Creating the Illusion of Round Corners

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.

Adding Elements to Achieve Round Corners

There are many ways to create a flexible-width, round-cornered box.

One commonly used method involves nesting four levels of <div> elements that are then used to position the background images.

Where possible, it is better to use existing HTML elements or instances of elements rather than add new elements. Additional elements create unnecessary markup, which can increase page size and make maintenance more difficult.