Help:Wiki University HTML-- Borders

MAIN PAGE

WIKI

WIKITEXT

HTML/CSS

FAMILY HISTORY CENTERS

VISUAL EDITOR

Lessons

1. HOME
2. Introduction
3. Headers
4. Lists
5. Nesting Lists
6. Comments
7. Paragraphs
8. Fonts - Changing
9. Font Size
10. Font Colors
11. Font Bold-Italics
12. Padding
13. Margins
14. Borders
15. Width and Height
16. Alignment
17. Tables
18. Tables - Borders
19. Tables - Widths
20. Tables - Captions
21. Tables - Col Labels
22. Tables - Cells
23. Tables - Rows
24. Tables - Placement
25. Tables - Sorting
26. Tables - Scrolling
27. Tables - Col Only
28. Tables - Col Spans
29. Tables - Row Spans
30. Infobox - Creating
31. Infobox - Placing
32. Infobox - If function
33. Sidebars
34. Navboxes
35. Position - Relative
36. Position - Absolute
37. Misc

---

Flexbox/CSS Grid

1. Flexbox Training

Additional Helps

• Common Wiki Fixes
• Wiki Tips
• Wiki Support Reading List

<< Previous Chapter

Next Chapter >>

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.

• Here is our lorem ipsum paragraph with a border instead of a background:

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.

• NOTICE the text has no space between the text and the border.
• NOTICE the border is spread all across the page.

Here is the attribute for the above border:

<p style="border:1px solid red">

Lets break down this attribute:

• 1px - is the thickness of the line which 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.

So in the above example we have a solid red border that is one pixel thick.

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.

• To place a border on the bottom side, for example, we enter:

<p style="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.

• 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

<p style="border-radius:5px">

This produces boxes with rounded corners which 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.

• The radius of the corner is 5 pixels.
• You can limit the rounding of corners to certain ones which this coding:

border-radius-right-top:5px
border-radius-left-top:5px
border-radius-right-bottom:5px
border-radius-right-bottom:5px

BORDER SHADOW

Here is a nice effect 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 effect. The box appears to stand above the page. Here is the coding:

<p style="box-shadow:10px 10px 5px #888888">

• The first 10 pixels is the distance from the bottom edge of the box to the edge of the shadow.
• The second 10 pixels is the distance from the right edge of the box to the edge of the shadow.
• The 5 pixels is the distance the box is ABOVE the page. The greater the distance the fuzzier is the shadow. The closer the box is to the page the darker is the shadow.
• The #888888 is, of course, the HEX number for the color of the shadow, which is a dark gray in this example.

EFFECT OF BORDERS ON WIDTH OF ELEMENTS

• When a border is added to an element such as a div tag, the area of the div tag remains the same, however the whole element expands by the thickness of the border.
• For example, if a container is 640 pixels wide and a 50 pixel border is added, whole element will expand to 740 pixels and expand into the right sidebars. So if you are adding thick borders, you need to assess how it will effect the width of the entire element.

• In addition, the widened borders will push an another element out of the way by the thickness of the border that touches it:

TRY THESE OUT . . . . .

Exercises

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.

Check your answers

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

<< Previous Chapter

Next Chapter >>