The box called ‘roundedBox’ contains 3 <div>s—the top corners, content and bottom corners. the divs containing the top and bottom corners have an over-size background image, ie. the image contains the left-hand corner and a 800px section of horizontal border. within this is another div with a background image positioned ‘right’ this is for the right-hand corner. The middle section is handled in a similar way. The beauty of this technique is that the images are all background-images, so they are kept out of the document flow for screen readers and the like.
The box can be a fixed or percentage width. The height is determined by the content.
View source or save this page for more information.