How to use inline styles 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 inline styles. Inline styles are usually not the best method for displaying a web page background, as they require much maintenance, and they can become very complicated.

Inline styles are usually nested somewhere between the body tags on any web page, but since we are styling the body, we will put the style properties inside the html body tag.

Here is the code snippet for the html body tag of our web page:

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 inline styled example web page using the code above in the html body tag.

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.