How to Add a Grey Shadow Border Around a Blog in CSS

Blogs contained within borders are common on the Internet, and they often have visual effects like rounded corners, gradients and shadow borders. Creating a shadowed border used to take a lot of work, involving creating images in Photoshop, cutting the images and writing complicated code to put them around the border. Using the “box-shadow” property in CSS level 3 (CSS3) you can add a shadowed border in one line of CSS code.

Instructions

1. Open your blog's main template file in a plain-text editor or a code editor. Find the “<div>” or “<section>” tags that surround the body of your blog:

   <div id=”blog_wrapper”>
   All blog content here...
   </div>

   Get the ID name of the tags or add one as shown above.

2. Open the stylesheet for your blog. At the bottom of the stylesheet's code create a new style rule that targets the blog's wrapping tags by their ID name:

   #blog_wrapper {
   }

3. Add the “box-shadow” property to your new style rule. This property creates drop shadows and can also do glowing color or a shadowed border:

   #blog_wrapper {
   box-shadow: 0px 0px 10px black;
   }

   By setting the first two values – left and top offsets – you tell the browser to center the shadow behind the blog. The third value represents the amount of blurring added to the shadow with larger numbers indicating more blurring.

4. Change “black” to an RGBa (Red, Green, Blue and Alpha) color code:

   #blog_wrapper {
   box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
   }

   The above example shows an RGBa code for black at 30 percent transparency. The first three values in RGBa correspond with red, green and blue values. The last value ranges from zero to one in decimal points and sets the transparency level, with zero being invisible and one being opaque.

Tips & Warnings

• In WordPress the files to edit are “index.php” for the main template and “style.css” is the stylesheet. Many other blogging systems exist all of which use different file names and code. Refer to the online manual for those platforms.

• Drop shadows do not work in Internet Explorer versions 8 and below. Your site's visitors will still see the page but the shadow will not be there.