Experimenting with XHTML & CSS

Rounded Corners

CSS rounded corners give a web page that little extra. Something as small as rounding off text or image boxes can determine if someone says and looks at
your site.

Making rounded corners is easy. Here's how you can do it yourself:

• Make 4 .gifs of the rounded corners
  
• Create a container div to hold the box, a div for the top row and a div for the bottom row.
  
• Between the top and bottom rows, add the content.
  
• In the top and bottom row divs, add the left corner image and set the inline style to read display: none;. This makes the image invisible unless it is made visible through the stylesheet.
  
• he CSS sets the width and background color of the container object and the color of the text inside. The margins on interior paragraphs are set so that the text doesn't sit right up against the edge of the box.
  
• Then the top and bottom divs are given a background image that contains the right corner images and the left corner images from the HTML code are enabled.