.my_div { outline:1px solid #000; }
Would produce:

Now let’s include this with a border.
.my_div {
  outline:1px solid #000;
  border:1px dashed #000;
}
Would produce:

The CSS Outline syntax is pretty much the same as CSS Borders.

Now let’s have a look at some of the other possibilities:
.my_div{ border:1px dotted #000; }
This will produce:

.my_div{ border:1px dashed #000; }
This will produce:

.my_div{ border:1px double #000; }
This will produce:

You can also use CSS Borders to create 3D effects:
.my_div{ border:5px groove #000; }
This will produce:

.my_div{ border:5px ridged #000; }
This will produce:

.my_div{ border:5px inset #000; }
This will produce:

.my_div{ border:5px outset #000; }
This will produce:

The 3D borders can all be manipulated using the border-color attribute

CSS Box Model

The CSS Box Model is a lot simpler than how it may look at first sight. Let’s begin with the content. Think of the content area an an empty div element. You add your content to it as you normally would.
<div class="my_div">Some content here</div>

.my_div{ }

Simple. Now let’s add some padding.
.my_div { padding:10px; }
Now the content in the div is pushed in 10 pixels in every direction (top, bottom, left and right), making it 20 pixels higher (top AND bottom) and 20 pixels wider (left AND right). This is represented in the above diagram.

Now we can add a border to the content.
.my_div {
  padding:10px;
  border:10px solid green;
}
This adds a 10 pixel green border all the way around the div element. Assuming that the original div is 100px high and 100px wide it is now:
100×100px + 20×20px (padding) + 20×20px (border). Remember that the border takes up 10 pixels on the left AND right, aswell as the top AND bottom, meaning 20px height and 20px wide.

And finally we have the margin. The margin doesn’t add any size to the div itself but instead spaces it out away from other elements. Imagine margin to be identical to padding but on the outside of the box. If we add 10 pixels of margin it will add 10 pixels to every side of the box, making the box 20 pixels wider, and 20 pixels higher.

So let’s summarise, a 100px box, with 10px padding, 10px border and 10px margin:
.my_div {
  padding:10px;
  border:10px solid green;
  margin:10px;
}
Will be 100px + 20px + 20px + 20px = 160px.

The CSS Box Model is a very important and simple theory to master before starting a