Learn how to style an hr element with CSS. You can use the border property to style a hr element: The HTML hr tag. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, …

Sep 26, 2024 · In this guide, we’ll explore two effective methods to add horizontal lines in HTML: using the <hr> tag and CSS properties. Different Approaches to Add Horizontal Lines in HTML 1.

If you just want a design line, you could use something like the css class.hline-bottom { padding-bottom: 10px; border-bottom: 2px solid #000; /* whichever color you prefer */ } and use it like <div class="block_1 hline-bottom">Cheese</div>

Learn the ways of styling and have attractive horizontal lines: how to change color and size, set images as horizontal lines and a pack full of various kinds of examples.

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

Apr 17, 2025 · How to change the color of horizontal line (<hr> element) using CSS ? The HTML <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The color of the <hr> tag can be set by using the background-color property in CSS.

Oct 22, 2024 · The <hr> element in HTML is used to create a horizontal line or thematic break between sections of a webpage. By default, it shows as a solid, thin line that spans the width of its container. You can easily customize the appearance of the <hr> element using CSS to match your website's design and style. This allows you to adjust the thickness ...

First, <hr> can be styled with CSS. hr { height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); } Code above courtesy of CSS-Tricks.com. See more examples. Whenever possible, you should stick to horizontal rules for their semantic value.

Adhering to best practices ensures effective, visually appealing, and accessible designs. Below are key guidelines for styling horizontal lines using CSS. Maintain Consistency: Use uniform styles for horizontal lines across similar sections to create a cohesive design. Example: All section separators use the same thickness and color palette.

Feb 21, 2022 · There are 2 easy ways to create horizontal lines in HTML: Use the horizontal rule <hr> element. Add a bottom border with CSS. For example: <div style="border-bottom: 5px solid black">TEXT</div> Take note that the <hr> element carries a semantic meaning of “thematic break”, while the border is purely cosmetic.