This tutorial is rather simple but for those who want to learn how to do it should continue reading.
In this tutorial we are going to spice up the default template provided by Visual Studio/Web Developer 2010.
Here is what the tutorial is going to focus on:

View Full Size

There are 2 styles we are going to look at

1. Drop Shadow
2. Rounded Corners

This will not be done using any images, it’s going to be CSS3.

Note! These styles will not be picked up in the current or previous versions of Internet Explorer 8.0
When applying any CSS3 styles to your web apps, make sure those items can be displayed correctly in internet explorer as well.
The image you see above will be displayed in IE without the drop shadow and rounded corners.

With all that out of the way, lets get started.

• Fire up Visual Web Developer 2010 or Visual Studio 2010
• Create a new project or a new Website (Shown in Screen 1.1

• Once your website has been created navigate to
  • Styles -> Site.css and double click it to open it.
• There are 2 css classes we need to modify
  1. page
  2. header
• Scroll down to the page class (it should look like this:


.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}


• Under the border:  1px solid #496077; add these 4 lines

-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-shadow: 15px -15px 9px #333;
-webkit-box-shadow: 15px 15px 9 #333;
-moz is mozilla based web browser and -webkit is safari, chrome based browsers

• Scroll down to the header class (it should look like this:)


.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}

• Under the background: #4b6c9e; add these 2 lines

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
You may need to adjust the 10px to a lower or higher number to look the way you want it to.
Now if you save your Site.css file and view your default page or some other page in a browser outside of IE you should now see the changes take effect.

The page class is the page itself where everything is located (menu, content area, footer etc.)
That’s where we want the drop shadow to appear as well as the rounded corners.
Here’s the comparison in browsers between Firefox and IE

Firefox 3.6.3

Internet Explorer 8.0

To get more information and more goodies using css3 visit the css3.info website.
You can apply more styles to your website to make it look much nicer.
Hopefully this tutorial has helped in spicing up your website.