How to use an Internal Style Sheet to display a rounded corner background image.

Web pages can be styled using 3 different CSS methods: External Style Sheets, Internal Style Sheets, and Inline Styles. In this tutorial we will look at how to display a rounded corner background image using an Internal Style Sheet. Internal Style Sheets are usually not the best method for styling web pages, but are useful for some purposes, especially for websites with very few pages. The best method is generally External Style Sheets, since you can modify multiple (or all) web pages using one External CSS File (External Style Sheet). When using an Internal Style Sheet, you can only make changes to the web page that contains the styles.

To style the background image we will use the CSS body tag (not the html body tag). We will enclose the styles in between the style tags, which we will place in the head of the web page.

Here is the code snippet:

For this tutorial, I created a background image using the Free Rounded Corner Maker on this site. The settings were as follows:
Background Width: 800
Background Height: 800
Corner Radius: 30
Fill Color: ffffff
Border Color: f89900
Border Size: 20
Rounded Edge: 8

I saved this image to my computer as background.gif.

Next, I created a simple internal stylesheet example web page using the code above in the head of the web page.

Here is the code for the example web page.

Go ahead a try to do these steps, and upload the example web page and image to your website.