Lines With a Single Color and Style

Code Snippet Library 

On this first page, we'll provide examples of and code for one color and/or style horizontal lines that you can quickly and easily implement in your course. Keep in mind that horizontal rules are context-specific and should be guided by a good visual design plan. Use lines thoughtfully and consistently.

Horizontal Lines

Horizontal lines can be created by styling the border, top-border, and/or bottom-border properties of a horizontal rule (<hr />) or the top-border and/or bottom-border properties of other elements.

Horizontal Rule With Margins

<hr style="margin: 1.5rem 15%;" />

One Color Horizontal Line

<hr style="border-top: 3px solid #99CC00; margin: 1.5rem 0;" />

Dashed Horizontal Line

<hr style="border-top: 4px dashed #1E407C; margin: 1.5rem 0;" />

Horizontal Double Line

<hr style="border-top: 8px double #e98300; margin: 1.5rem 0;" />

Horizontal Dotted Line

<hr style="border-top: 8px dotted #001E44; margin: 1.5rem 0;" />

Horizontal Rule With Linear Gradient

<hr style="border-top: none; height: 8px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #bc204b, rgba(0, 0, 0, 0)); margin: 1.5rem 0;" />

Line With Curved Ends

<hr style="height: 30px; border-color: #009CDE; border-width: 3px 0 0 0; border-radius: 20px; margin: 1.5rem 0;" />

Vertical Lines

Two-Tone Vertical Line

<div style="border-left: 0.75rem groove #AC8DCE; padding: 0.25rem 0.75rem; margin: 1.5rem 0;">
    <p>Content</p>
</div>

Vertical Double Line

<div style="border-left: 0.75rem double #96BEE6; padding: 0.25rem 0.75rem; margin: 1.5rem 0;">
    <p>Content</p>
</div>

Quick Tip: Bottom Borders

Bottom borders can be added to header tags to create emphasis. For more information, see the Heading Styles page in the Other Module.