Code Tutorial

We will use this page of the borders and lines tutorial to explore adding background color and creating borders using horizontal and vertical lines.

Horizontal Rules

A horizontal rule, <hr />, is an element used to create separation within a page. Horizontal rules may be customized by styling border, height, margin, and background properties. Keep in mind, elements cannot be nested within a single <hr /> tag. It is possible; however, to use two <hr /> tags to surround other elements.

Settings within the <hr /> are applied to all sides, unless specified. The following are two sets of examples that demonstrate the impact of using the border-top property. The resulting effect in the first set of examples is subtle—simply a thinner horizontal line.

<hr style="border: 10px solid #3EA39E;" />

<hr style="border-top: 10px solid #3EA39E;" />

In the second set of examples, a marked impact results from the application of the border-top property. In the first example the double-line has been added to all four sides, creating the visual effect of a box around a solid green line. In the second example the property is only applied to the top, resulting in the double line.

<hr style="border: 10px double #3EA39E;" />

<hr style="border-top: 10px double #3EA39E;" />

Quick Tip: Margins

Consider adding margins to your horizontal rule to create visual white space in your course. For more in-depth information on margins see: Box Margins, Padding, and Placement page of the Boxes Module.

Borders

Borders may be styled to with a uniform appearance on all sides of an element or with properties selectively applied to create nonuniform borders. If no specific sides are indicated within the style attribute, the border settings will be applied to all sides (top, right, bottom, left) of the element.

Styling Horizontal vs. Vertical Border Lines

Horizontal vs vertical may influence where to apply the styling. Horizontal lines can be achieved by setting border, border-top, and/or border-bottom properties of an <hr /> tag or the border-top and/or border-bottom properties of another element.

Notice how the following two examples produce similar results, while coded differently.

Heading Tag Followed By Styled Horizontal Rule

<h4 style="padding-bottom: 0.5rem; margin: 1.5rem 0 0 0;">Heading Tag Followed By Styled Horizontal Rule</h4>
<hr style="border-color: #1E407C; margin: 0 0 1.5rem 0;" />

Bottom Border Applied to Heading Tag

<h4 style="border-bottom: 2px solid #1E407C; padding-bottom: 0.5rem; margin: 1.5rem 0;">Heading</h4>

Vertical lines are created by styling the border-right and/or border-left property of a parent element containing content.

Left Border Applied to Div Tag

The border extends the length of the div's contents. This example includes a heading and a paragraph within the div.

<div style="border-left: 0.5rem solid #1E407C; padding-left: 0.5rem;">
    <h4>Heading</h4>
    <p>Content</p>
</div>

Styling Intricate Borders

Borders can be added to a variety of page elements, images, boxes, iframes, text, and so on; however, how you style the code will be determined by your overall visual design. If you are interested in learning more about adding borders to boxes or images refer to Box Borders and Backgrounds and Image Borders.

To create an intricate border, one must determine what borders (i.e., horizontal and vertical lines) will be included and the elements (<div>, <p>, etc.) where they will be located. In the video iframe example from the library, the border consists of two vertical lines of differing height and thickness and one horizontal rule. To create lines of varying lengths and widths, the iframe has been nested into a <div> to which borders were applied and then added an <hr />. Various margins and paddings were added to produce the varying lengths and overlapping lines. The result is a plaid-like effect.

Video 2.2. Penn State Values: Excellence

<div style="border-right: solid 0.75rem #1E407C; max-width: 600px; padding-bottom: 0.25rem; margin: 1rem 0;">
    <div style="border-right: solid 0.5rem #1E407C; max-width: 580px; margin-right: 0.75rem;">
        <iframe src="[SOURCE URL]"></iframe>
        <hr style="border-top: solid 0.25rem #1E407C; margin: 0.25rem -10% 0.25rem 10%;" />
        <p>Video [#.#. TITLE]</p>
    </div>
</div>

Backgrounds

How monitors and other electronic devices display horizontal lines may vary. When styling multicolored horizontal rules, we recommend including background colors as it provides a more consistent appearance across devices.

In this example, the color is specified for top-border of horizontal rule. Height and background color have also been set to add color beneath:

<hr style="border-top: 5px solid #1E407C; background: #96BEE6; height: 15px;" />

In this example, the color specified for top-border and bottom-border of horizontal rule. The height and background color has been set to add color between the two.

<hr style="border-top: 4px solid #1E407C; border-bottom: 8px solid #AC8DCE; background: #96BEE6; height: 10px;" />