Help:Wiki University Wikitext--Borders

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps


In the previous chapter, we used DIV-tags and the background-color attribute to demonstrate the lack of space between the two paragraphs. The border attribute can be used instead of the background-color attribute to also show the lack of space between the two paragraphs.

  • Here is our two lorem ipsum paragraphs using a border attribute instead of a background attribute:

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.
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 a solid line surrounds each paragraph instead of the background color.
  • NOTICE there is no space between the two paragraphs.

Here is the coding for the above border:

<div style="border:1px solid red">Lorem ipsum...</div>
<div style="border:1px solid red">Lorem ipsum...</div>

Here is the format for the border attribute:

border:1px solid red

Note that the property of the attribute is "border" and that there are three parts to the value of the 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[edit | edit source]

We can place borders on one, two, or three sides using the following attributes:

border-top:1px solid red
border-left:1px solid red
border-right:1px solid red
border-bottom:1px solid red


  • For example, to place a border on the bottom, we would add the attribute to the div-tag (or p-tag) as follows:
<div style="border-bottom:1px solid red">

  • Here is the result:
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[edit | edit source]

For a complete list of accepted border types, click here.

Border radius[edit | edit source]

The corners on boxes are square by default, but you can make them rounded by using the border-radius attribute with the border attribute. Here is the code for the border-radius attribute:

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 with this coding:

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


Border shadow[edit | edit source]

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:

box-shadow:10px 10px 5px #888888

  • The first 10 pixels is the distance from the right edge of the box to the edge of the shadow.
  • The second 10 pixels is the distance from the bottom 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.

Padding and margins in borders[edit | edit source]

Padding and margin attributes are often used with the border attribute.

  • Padding separates the text or content from the inside edge of the border with blank spaces.
  • Margins separate the text or content from the outside edge of the border with blank spaces.
  • These attributes will be addressed in the next two chapters.

Try these out[edit | edit source]

Tests.gif
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.


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