Menu
I would like to style up a <hr /> tag but can't seem to find an answer online anywhere that works.
I want to change the color and thickness if this is possible? I am able to change the length of it easy but that seems to be all that works so far.
Or is there an alternative to a hr tag that I can use?
Can anyone help me?
229
To make them look nicer, add CSS to adjust the visual appearance of these elements to be in line with how you want your site to look. A basic HR tag is displayed the way the browser wants to display it. Modern browsers typically display unstyled HR tags with a width of 100 percent, a height of 2 pixels, and a 3D border in black to create the line.
In this snippet, you can find some examples of adding color to the <hr> tag. Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) Use two <p> elements and add an <hr> element between them. Specify the height and background-color properties. Set the border to “none”. Let’s see the final code.
Learn how to style an hr element with CSS. How To Style HR Horizontal Line You can use the borderproperty to style a hrelement: Example /* Red border */ hr.new1 { border-top: 1px solid red; /* Dashed red border */ hr.new2 { border-top: 1px dashed red; /* Dotted red border */ hr.new3 { border-top: 1px dotted red; /* Thick red border */ hr.new4 {
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is used to separate content (or define a change) in an HTML page.
You can do this:
CSS
hr{
border: none;
height: 10px;
background: #ccc;
}
DEMO HERE
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
