How can I change the thickness of my hr tag

Question

I want to change the thickness of my horizontal rule   lt hr gt  in CSS  I know it can be done in HTML like so -    lt hr size  10  gt    But I hear that this is deprecated as mentioned on MDN here  In CSS I tried using height 1px but it does not change the thickness  I want the  lt hr gt  line to be 0 5px thick    I am using Firefox 3 6 11 on Ubuntu

User · Answer

I was looking for shortest way to draw an 1px line, as whole load of separated CSS is not the fastest or shortest solution.

Up to HTML5, the WAS a shorter way for 1px hr: <hr noshade> but.. The noshade attribute of <hr> is not supported in HTML5. Use CSS instead. (nor other attibutes used before, as size, width, align)...

Now, this one is quite tricky, but works well if most simple 1px hr needed:

Variation 1, BLACK hr: (best solution for black)

<hr style="border-bottom: 0px">

Output: FF, Opera - black / Safari - dark gray

Variation 2, GRAY hr (shortest!):

<hr style="border-top: 0px">

Output: Opera - dark gray / FF - gray / Safari - light gray

Variation 3, COLOR as desired:

<hr style="border: none; border-bottom: 1px solid red;">

Output: Opera / FF / Safari : 1px red.

User · Answer

I believe the best achievement for styling  lt hr gt  tag is as follow   hr   color  ddd  background-color   ddd  height 1px  border none  max-width 100       And for the HTML code just add   lt hr gt

User · Answer

I added opacity to the line  so it seems thinner    lt hr style  opacity  0 25  gt

User · Answer

I suggest to use construction like   lt style gt     hr   height 0  border-top 1px solid  anycolor        hr hr   display none    lt  style gt    lt div class  hr  gt  lt hr   gt  lt  div gt

User · Answer

For consistency remove any borders and use the height for the  lt hr gt  thickness  Adding a background color will style your  lt hr gt  with the height and color specified   In your stylesheet   hr       border  none      height  1px         Set the hr color        color   333     old IE        background-color   333     Modern Browsers        Or inline as you have it    lt hr style  height 1px border none color  333 background-color  333     gt    Longer explanation here

User · Answer

Here s a solution for a 1 pixel black line with no border or margin  hr  background-color black  border none  height 1px  margin 0px      Tested in Google Chrome   I thought I would add this because the other answers didn t include  margin 0px     Demo    x000D   x000D  hr  background-color black  border none  height 1px  margin 0px   x000D   lt div style  border  1px solid black  text-align center   gt  x000D   lt div style  background-color lightblue   gt    container    lt br gt   lt br gt   lt br gt    hr    lt  div gt  x000D   lt hr gt  x000D   lt div style  background-color lightgreen   gt    hr    lt br gt   lt br gt   lt br gt    container    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I would recommend setting the HR itself to be 0px high and use its border to be visible instead  I have noticed that when you zoom in and out  ctrl   mouse wheel  the thickness of HR itself changes  while when you set the border it always stays the same   hr       height  0px      border  none      border-top  1px solid black

User · Answer

Sub-pixel rendering in browsers  Sub-pixel rendering is tricky  You can t actually expect a monitor to render a less than a pixel thin line  But it s possible to provide sub-pixel dimensions  Depending on the browser they render these differently  Check this John Resig s blog post about it   Basically if your monitor is an LCD and you re drawing vertical lines  you can easily draw a 1 3 pixel line  If your background is white  give your line colour of  f0f  To the eye this line will be 1 3 of pixel wide  Although it will be of some colour  if you d magnify monitor  you d see that only one segment of the whole pixel  consisting of RGB  will be dark  This is pretty much technique that s used for fine type hinting i e  ClearType   But horizontal lines can only be a full pixel high  That s technology limitation of LCD monitors  CRTs were even more complicated with their triangular phosphors  unless they were aperture grille type ie  Sony Trinitron  but that s a different story   Basically providing a sub-pixel dimension and expecting it to render that way is same as expecting an integer variable to store a number of 1 2034759349  If you understand this is impossible  you should understand that monitors aren t able to render sub-pixel dimensions   Cross browser safe style  But the way horizontal rules that blend in are usually done using colours  So if your background is for instance white   fff  you can always make your HR very light  Like  eee   The cross browser safe style for very light horizontal rule would be   hr       background-color   eee      border  0 none      color   eee      height  1px      And use a CSS file instead of in-line styles  They provide a central definition for the whole site not just a particular element  It makes maintainability much better

User · Answer

height attribute has been deprecated in html 5  What I would do is create a border around the hr and increase the thickness of the border as such  hr style  border solid 2px black

[html] How can I change the thickness of my <hr> tag

Examples related to html

Examples related to css

Examples related to user-interface