Rouned Centered divs in Dreamweaver

    ●   Learn how to add padding and rounded corners to your divs.

Learn About:

Code Hints padding Rounded Corners

  •   This tutorial is part of the Fan-Tastic Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

Step #1: Open your Page in Dreamweaver ~

Hopefully you've done this tutorial already and already moved to Dreamweaver …

Open your page in Dreamweaver and hit Split.

Locate your centered <div> tag that you added from this tutorial

… and add a space at the end of the string.

Code hints is Dreamweaver's way of helping you write proper code.

Step #2: Code Hints ~

The first thing you want to try is padding to your div …

Type     p     a     d     and Dreamweaver gives you code suggestions …

… select padding and experiment with distances in pixels.

The idea is to keep your elements aligned:

Step #3: Rounded Corners ~

Rounded corners may not work for everybody, but try it and see if you like …

border-radius may not have code hints. Type the code yourself. Again, experiment with the settings to get a curve radius you like …

More variations can be found here:

Step #4: Borders ~

Next, add borders to your div by specifying a width to the border …

… and then choose a border style from the code hints …

… and lastly, add a color.

Step #5: Percentages ~

Laslty, instead of using fixed with divs, change the width to 80%.

There are many examples of borders you can try:

Always Be Creative! Try New Things! Experiment!

Last Step: Save and Attach ~

Save, upload your page, attach the link, and continue working …

Other Resources: and and