BORDERS FOR WIRE FRAMING

Applying simple borders to your divisions and other key elements is a brilliant way of creating a wire frame.
Wire framing a design with a thin solid or dashed line around your divs can help you understand how one
element relates to another, and also identify problems with alignment and juxtaposition.
You can apply a simple dashed line to all divs, for example, using a base selector for the <div> tag:
/* Place a thin gray border around all divisions */
div {
border: 1px dashed #CCC;
}
This rule would be placed immediately after the body selector in the style sheet, and would ensure all
divs you create inherit a thin gray border, unless you specify otherwise in that element’s rule. To apply this rule
to further base elements, simply group the selectors together:
/* Place a thin gray border around the following elements */
div, h1, h2, h3, h4, ul {
border: 1px dashed #CCC;
}
When you are satisfied that your design is hanging together correctly, just remove the relevant selectors
or the entire rule.

border Setting Four Borders in one

Using border and the border-top, border-right, border-bottom, and border-left properties
allows you to further shorten the given border-style and border-width and border-color
values into one property. Let’s look at an example of this shorthand.
Using the CSS from the previous example, again the same border-color, border-style,
and border-width values are assigned in that order:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-top: #000 thin dashed;
border-right: #999 20px dotted;
border-bottom: #333 medium solid;
border-left: #CCC thick ridge;
}
which gives us the same results, but with just four properties in the rule. If all values were to be
the same, the properties can be further combined into one using border:
/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: #000 thin dashed;
}

Styling a table by Css : Adding borders to tables

As mentioned earlier, it’s a good policy to avoid using the default HTML table border. It
looks ugly and old-fashioned, and it’s a far cry from a clean, flat, 1-pixel border. You might
think it’s a straightforward process to add CSS borders to a table—logically, it makes sense
to simply add a border property/value pair to a grouped selector that takes care of both
the table headers and table data cells.
th, td {
border: 1px solid #c9c9c9;
}
But this doesn’t work. As the screenshot to the right shows, this method
results in the correct single-pixel border around the edge of the table,
but creates double-thick borders everywhere else. This is because the
borders don’t collapse by default, meaning that the right-hand border of
one cell sits next to the left-hand border of an adjacent cell, and so on.
Designers have historically gotten around this by using a rule to define a style for the top
and left borders of the table, and another to define a style for the right and bottom
borders of table cells. However, there’s a perfectly good property that
deals with the double-border syndrome: border-collapse. When this
property, with a value of collapse, is applied to the table element via an
element selector, borders collapse to a single border wherever possible.
The other available border-collapse property value, which reverts
borders back to their “standard” state, is separate.
table {
border-collapse: collapse;
}
With this brief explanation of table borders completed, we’ll now move into exercise
mode and style the table.