University of Utah

Borders and Lines Overview

Updated on

In this module, you will find code and examples for adding borders and lines into your course. There are a variety of ways to create borders and lines. This module will focus predominantly on horizontal rule <hr /> and <div> tags. While you can also add lines through the use of images, we caution you against this practice. This module is intended to be a reference only and will not exhaust all of the possible use cases for horizontal rules or borders; however, it will serve as a starting point for you to explore additional HTML and CSS style codes that will meet your specific design needs. 

Purpose of Borders and Lines

Borders and lines are typically used to create breaks within content pages. These breaks could represent a shift in concept, theme, idea or topic. They also can be used to create footers to signify the end of a content page or to add visual interest to images, video embed frames, and other graphic elements. 

Learn About Borders and Lines

If you want to create or learn more about creating and customizing borders and lines, see the tutorial pages at the end of this module.

Best Practice!
Horizontal lines (horizontal rules) and/or vertical lines provide nice visual breaks in content, but should be used sparingly and consistently.

  • Lines should not be used to create page structure as they are ignored by screen readers. Proper heading structure is still necessary.

  • The colors, shapes, and sizes can be modified.

  • Consider adding margins to create white space before or after the horizontal line.

  • Some styles may not display the same on mobile phones, tablets, laptops, or desktop computers.

  • The line style should match the style of the course.

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Table Borders and Shading
Next Article Lines With a Single Color and Style