Example of changing the color of your horizontal line by setting the border-top property | CSS Snippets

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .hr1 {
        border: 0;
        height: 3px;
        background: #095484;
        background-image: linear-gradient(to right, #ccc, #095484, #ccc);
      }
      .hr2 {
        border: 0;
        height: 3px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(9, 84, 132), rgba(0, 0, 0, 0));
      }
      .hr3 {
        height: 15px;
        border: 0;
        box-shadow: inset 0 12px 12px -12px rgba(9, 84, 132);
      }
      .hr4 {
        border-top: 3px double #095484;
      }
      .hr5 {
        background-color: #fff;
        border-top: 2px dashed #095484;
      }
      .hr6 {
        border-top: 3px dotted #095484;
      }
      .hr7 {
        height: 30px;
        border-style: solid;
        border-color: #095484;
        border-width: 1px 0 0 0;
        border-radius: 20px;
      }
      .hr8 {
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: #095484;
        border-width: 0 0 1px 0;
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <h3>Gradient Horizontal Line</h3>
    <hr class="hr1" />
    <h3>Gradient Transparent</h3>
    <hr class="hr2" />
    <h3>Single-direction Drop Shadow</h3>
    <hr class="hr3" />
    <h3>Double</h3>
    <hr class="hr4" />
    <h3>Dashed</h3>
    <hr class="hr5" />
    <h3>Dotted</h3>
    <hr class="hr6" />
    <h3>Rounded Corners</h3>
    <hr class="hr7" />
    <hr class="hr8" />
  </body>
</html>