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 #BE0000; margin: 1.5rem 0;" />
Dashed Horizontal Line
<hr style="border-top: 4px dashed #708E99; margin: 1.5rem 0;" />
Horizontal Double Line
<hr style="border-top: 8px double #FFB81D; margin: 1.5rem 0;" />
Horizontal Dotted Line
<hr style="border-top: 8px dotted #890000; 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), #BE0000, rgba(0, 0, 0, 0)); margin: 1.5rem 0;" />
Line With Curved Ends
<hr style="height: 30px; border-color: #3ABFC0; 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 #3ABFC0; padding: 0.25rem 0.75rem; margin: 1.5rem 0;">
<p>Content</p>
</div>
Vertical Double Line
<div style="border-left: 0.75rem double #E2E6E6; 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 Manual.
0 Comments
Add your comment