How to use HR color html

How to use HR color in HTML and CSS?

The <hr> tag in HTML is used to create a horizontal rule, which is a thematic break or a line separator between content sections. You can change the color of the <hr> element using the color attribute or by using CSS.

Using the <HR> color attribute:

<!-- Set the color directly using the color attribute -->

<hr color="red">

Using CSS:

<!-- Using inline CSS -->

<hr style="border-top: 2px solid blue;">

You can specify the color by using the color attribute or applying a style directly to the <hr> element using CSS. The color attribute accepts color names (like "red", "blue", etc.) or hexadecimal color codes, while the CSS approach provides more flexibility by using different border styles, widths, and colors.

Additionally, you can define the color in an external CSS file or in a <style> tag within the HTML document to apply the same style across multiple <hr> elements on the page. For example:

<style>

  /* CSS in a style block */

  .custom-hr {

    border-top: 2px solid green;

  }

</style>

<!-- Applying the style using a class -->

<hr class="custom-hr">

This code creates a class named .custom hr that defines the style for the <hr> element with a green color