MoreLesson 198Free preview

Style HR

This lesson is part of How To · All levels

Summary

The hr (horizontal rule) element marks the shift of a topic or the separation between parts. Its lower appearance is a curved thin line, but it can be transformed into a colored line, a gradient, or a break. By removing the built-in border and then setting the height and background, the HR could become a decorative element that blends with the design.

Key points

Hr has semantic meaning as a thematic separator, not just a decorative line
Adjust the border: 0 and then give the height and background for the modern look.
Use the margin to set the distance hr from the content above and below
Gradien in the background can make lines fade at both ends

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.