Create custom style Horizontal Rule HR tag using CSS

Here is how you can create a custom style horizontal rule <hr> tag using CSS:

1. Apply a class to the <hr> tag:

html

Copy

<hr class="custom-hr">

1. Add CSS styles to the class:

css

Copy

.custom-hr {
  /* Specify height */
  height: 5px; 

  /* Specify background color */
  background-color: green;

  /* Specify border radius for rounded corners */
  border-radius: 5px;
}

1. You can also style the <hr> using:

• width property to change the width

• margin and padding to add space around it

• border to add a border instead of background color

For example:

css

Copy

.custom-hr {
  height: 5px;  
  width: 50%; /* 50% of parent element width */
  margin: 20px 0; /* 20px top and bottom margin */
  border: 2px dashed red; /* Red dashed border */
}

1. For a double line <hr>, use:

css

Copy

.custom-hr {
  height: 5px;  
  border-top: 2px solid red; /* Top border */   
  border-bottom: 2px dotted blue; /* Bottom border */
}

1. You can animate the <hr> on hover using CSS transitions:

css

Copy

.custom-hr {
  transition: width 2s; /* Add transition */
}

.custom-hr:hover {
  width: 100%; /* On hover, increase width to 100% */  
}

Hope this helps! Let me know if you have any other questions.