Help:Wiki University Wikitext--Borders

Borders
So far we have talked about backgrounds of paragraphs and div tags and how the text inside those tags behave. But instead of using background colors to show the space taken up by a paragraph, we can use borders. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Here is the attribute for the above boader:
 * Here is our lorem ipsum paragraph with a border instead of a background:
 * NOTICE the text is still no space between the text and the border.
 * NOTICE the border is spread all across the page.
 * border:1px solid red

Lets break down this attribute: So in the above example we have a solid red border that is one pixel thick.
 * 1px is the width of the line, that is one pixel. You can have any size in pixels.
 * solid is the kind of line, that is, a solid line as apposed to a line that is dotted, dashed, etc.
 * red is the color of the line using the names or HEX codes accepted by the Wiki.

Borders on one, two, three sides
Just like padding and margins, we can place borders on one two, three or on all four sides of the div tag.
 * To place a border on the bottom side, for example, we enter:
 * border-bottom:1px solid red

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. So we now have four more attributes to add to the list:
 * NOTICE red border is only on the bottom of the div tag container. This is useful if we want to separate paragraphs or other objects with a line.
 * border:
 * border-top:
 * border-bottom:
 * border-left:
 * border-right:

Kinds of border lines
For a complete list of accepted border types click [here]

Padding and margins in borders
Padding and border attributes work the same way with borders.
 * Padding will separate the text from the edge of the div or paragraph tag container.
 * Margins will separate div and paragraph tags from each other.

Try these out
 Exercises Check your answers
 * 1) Using a div tag put a border around our lorem ipsum paragraph of a "groove" type that is 10 pixels thick.
 * 2) Using a div tag put a border around our lorem ipsum paragraph of a "ridge" type that is 15 pixels thick.

 Quick Quiz
 * You can only put borders on all sides.
 * A. True
 * B. False


 * There is a default space between text and borders
 * A. True
 * B. False


 * Solid lines are all that is allowed in borders
 * A. True
 * B. False

Check your answers