If you want a web site with images that make it stand out from the crowd, keep reading. This three-part article series will show you how to give your images a professional look without resorting to Photoshop. All you'll need is some basic CSS. In this first part, you'll learn how to use slim borders and padding to achieve a picture frame effect.
Decorating Images with CSS - A basic web page with sample images (Page 2 of 4 )
To illustrate how a combination of a few simple CSS properties can make an inline image look much more appealing, it's first necessary to have one that can be used for demonstration purposes. The image that I’ll be utilizing in this and subsequent tutorials of the series will be the following:
Well, I wouldn’t call this picture a gem of artwork, but its quality is good enough for our purposes. Now that we have an example image with which to work, we need to include it within the structure of a web page. The following code fragment does that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="content">
<h2>Main content section</h2>
<div id="section_container">
<img src="sample_image.png" width="300" height="200" alt="Image with decorative border" />
<h3>First example of decorative image using CSS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
<div id="section_container">
<img src="sample_image.png" width="300" height="200" alt="Image with decorative border" />
<h3>Second example of decorative image using CSS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
</div>
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
As you can see, the previous web page is made up of the typical header, content and footer sections, a common structure that you’ve probably seen hundreds of times before. However, you should pay attention to the main content area, which includes two copies of the sample image created a moment ago. When rendered by the browser, this specific section produces the following output:
While it’s fair to admit that the images in the page's current state look decent, they could be improved, right? Well, the good news is that you don't need to be a skillful designer to successfully make the improvements. We'll just be using some basic CSS properties.
To demonstrate the veracity of my claim, in the following section I’ll be enhancing the visual aspect of the previous images by adding a slim border to them and altering their padding values.
To learn the full details of this process, click on the link below and keep reading.
Style Sheets 
HTML5 Boilerplate Introduction
