How do I change the size of an HR line using css. I want to make it thicker.

4 answers

3
points
This was chosen as the best answer

I still use the hr tag, but agree it's not overly reliable. When I do use it, I use the following four properties for its appearance.

hr {
width: 100%; /* Length */
height: 1px; /* Thickness */
color: #FF0075; /* Colour */
background-color: #FF0075; /* Colour */
}

Another option is to create the line as a gif image at the desired target size, like so:

<img src="hr.gif" style="width: 800px; height: 10px;" alt="" />
Answered about 8 years ago by Edward Williams
4
points

I don't recommend using the hr as a design element. It's a difficult to style element that renders differently across browsers. Believe me, i' ve had lots of trouble with it. Try using a 1px height div and style one of the borders, the bottom or the top one and use it instead of the < hr/> element.

Answered about 8 years ago by Ionut Popa
2
points

Edward's answer above about styling hr is probably your best bet. I would avoid using an image or creating a presentational div. The hr is much more semantic and will serve you better down the road. The fact that it renders differently across browsers isn't as big of a deal as some make it out to be - few sites will look 100% pixel-perfect across all browsers.

If you do want to style using div borders, I'd recommend adding a border to an existing div element, instead of creating a new one just for the line.

Answered about 8 years ago by Jeremy Orion
1
point

height: your-desired-thickness

Answered about 8 years ago by Hannah Hu