rounded corners with css

We can make nice boxes with rounded corners with css. The box will expand to fit the content inside.

In your image program (like Photoshop or Gimp), make images for all the four corners, and the lines.

• Make the background color of the outer corners of the images, the same as the background color of your page.
• Make the background color of the inside of the images, the same as the background color of your box.
• Look here to see the images used for this box.

In your html page, make a box using the div classes that you see when you "view source" of this page.

• You need all the div and p tags for it to work
• You can add other tags inside those tags — like i did here with the lists.

In your css, make the styles, as you see in the css in the head when you "view source" of this page.

• Once you figure out how it works, of course you can change the style to suit your design.
• But the basic idea is that each "sub-box" of the entire box, has a separate background image, making the corners and edges.

See the links below for the deep explanations.