Hr Horizontal line HTML5 CSS stylish br Examples Code

Hr Horizontal line HTML5 CSS stylish <br> Examples Code learning


The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.


no shaded <hr> (with CSS):


<p>Your text here,>

<hr>

<hr style="height:3px;border-width:0;color:red;background-color:red">


Align a <hr> element with CSS:

Example:


<p> This is some text here. </p>


<hr style="width:50%;text-align:left;margin-right:0">


<p>This is some text here. </p>




Set the height of a <hr> element with CSS:

Example:

<hr style="height:20px">


Default <hr> CSS Settings


Example:


hr {

  display: block;

  margin-top: 2px;

  margin-bottom: 2px;

  margin-right: auto;

  margin-left: auto;

  border-style: inset;

  border-width: 2px;

}





An additional style for horizontal lines Go further with horizontal lines by giving different styles to your hr line element’s border. Check the example code to see what stunning horizontal lines are presented. Example of adding different styles to horizontal lines:

Example:


<!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>


Result:


Try Yourself

Example of adding a horizontal hr line with the border-top property:

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        border-top: 5px solid #095484;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal Line with Height and Background Color</h1>
    <hr />
  </body>
</html>

Result;


Try Yourself

Example of adding a horizontal hr line rule without a border:


You can change the color of the horizontal line by setting the border-top property and defining the color. Follow the example to see an illustration of it.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      hr {
        width: 100%;
        height: 30px;
        margin-left: auto;
        margin-right: auto;
        background-color: #b7d0e2;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal Line with Height and Background Color</h1>
    <hr />
  </body>
</html>

Result


Title of the document

Horizontal Line with Height and Background Color

Try Yourself

Comments :

Post a Comment