Horizontal Rule Tag

The horizontal rule or <hr> tag is used to draw a horizontal line on a page.

In HTML5 it represents a themeatic break or change in topic.

It has no attributes and its appearance is controlled using your style sheet.

Styling the HR

Our Default

hr {
max-width: 65ch; 
height: 2px; 
margin: 0 auto;
border:solid #1e90ff 2px; 
}

Note: It displays differently from browser to browser.

Red Raised

Added background color and box shadow

hr {
max-width: 65ch; 
height: 8px; 
margin: 0 auto; 
border: none; 
box-shadow: 3px 3px 6px #000; 
background-color: #ff0000
}

The Canoe

Rounded corners on bottom

max-width: 65ch; 
height: 1rem; 
margin: 0 auto; 
border: none;
border-radius: 0 0 1.25rem 1.25rem;
box-shadow: 3px 3px 6px #000; 
background: whitesmoke;

The Rainbow

max-width: 65ch; 
height: 1rem;  
margin: 0 auto; 
border: none; 
box-shadow: 3px 3px 6px #000; 
background: linear-gradient(135deg, #ff0000 0%, #ffcc00 50%, dodgerblue 100%);

Experiment!!

🔺