Help:Wiki University Wikitext--Borders

Borders
We have talked about backgrounds of paragraph and div tags and how the text inside those tags behaves. 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 border:  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.
 * Here is our lorem ipsum paragraph with a border instead of a background:
 * NOTICE the text has no space between the text and the border.
 * NOTICE the border is spread all across the page.
 * 1px - is the width of the line that is one pixel. You can have any size in pixels.
 * Solid - is the type of line, that is, a solid line as opposed 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
We can place borders on one two, three or on all four sides of the div tag just like padding and margins.  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.
 * To place a border on the bottom side, for example, we enter:
 * NOTICE the 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.

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

Padding and margins in borders
Padding and margin 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.

Border radius
The corners on boxes are square by default, but you can make them rounded by using this coding  box shadow: 10px 10px 5px #888888 This produces boxes or containers that look like this: 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.

Border shadow
Here is a nice affect for boxes, etc called box-shadows: 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.

This is a nice affect. The box appears to stand above the page. Here is the coding:  box shadow: 10px 10px 5px #888888

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 with whatever color you like.
 * 2) Using a div tag put a border around our lorem ipsum paragraph of a "ridge" type that is 15 pixels thick with whatever color you like.

 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