Rounded divs with Drop Shadow in Dreamweaver

    ●   Learn how to add drop shadows and rounded corners to your divs.

Learn About:

Code Hints Drop Shadow Rounded Corners ID vs. CLASS

 •   This tutorial is part of the Art Genre , What in the World?, and Home Sweet Home Portfolio Projects.


Other People's Work:

Here are examples of work inspired by this tutorial.


Step #1: Open your Work in Dreamweaver ~

Make sure your index page is open in Dreamweaver.


Step #2: CSS Styles Panel ~

Create a new CSS rule …

new rule

… make it a class …

… and call it shadow.

shadow class tag

Press OK and a new screen pops up - just hit OK for now …

just hit ok for now

Step #3: Open your Styles Sheet ~

Double-Click to open your styles sheet …

open your styles sheet

… scroll down and find the shadow class you just made:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #4: CSS Styles Panel ~

Copy and paste this code …

	box-shadow:	7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
	-webkit-box-shadow: 7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
	-moz-box-shadow: 7px 0px 10px -5px #000, -7px 0px 10px -5px #000;     
	border-radius: 20px; 
	-webkit-border-radius: 20px; 
	-moz-border-radius: 20px; 

… like this:

Step #5: Attach the class to the div ~

Go back to the Source code of your HTML document …

source code

… find your #container or #header div - WHATEVER DIV YOU'RE WORKING ON …

container id

… and add the shadow class to the div.

Notice you now have an #ID and a .CLASS applied to the same element:

Step #6: See if it Works ~

Hit small to view your work.


Hopefully it looks something like this …

drop shadow div

Step #7: Borders ~

Try adding borders to your div …

Here are examples of the many kinds of borders you can try: and

Check how your web page reacts to these changes!

Last Step: Upload your Site ~

Save and upload your files with the completed code.

upload your site

Attach the URL of your site, and continue working…

Other Resources: and and