Styling the <hr> Element

what are <hr> tags? / intro

hr is an html element that appears on screens as a divider. its useful for helping you seperate content, i.e. large bodies of texts. its purpose is to define thematic breaks/change of content in your html document. by default, they appear to be a line with a gray inset border.

this short guide will detail some methods to styling them which you can use to better fit the theme of your pages ☺

of course not every possible way you could style them w css is listed here; the purpose of this is more just a 'bounce pad' where you can combine/add to what ive compiled here

basic border styling

i find the hr tag's default styling really ugly and not suited for most pages kek. the simplest way to style it is just to change its default border style.

  hr {
    border: none; /* the border is not actually a line but a very thin box. */
    border-top: 4px dotted pink;
      /* by referring to only one vertical line in the box's border we get an actual line */
  }

taller/"thicker" border

hr, at its core, is just an empty div acting as a line; its not just a line, but a very thin box. we can change its width to be taller by simply giving it a height value.

  hr {
    height: 30px;
  }

if you want a border with a rounded border, we can do so by defining a background property and using that as a "line" while having rounded edges at the same time.

  #round hr {
    border: none;
    border-radius: 50px;
    height: 20px; /* this effect is more noticable the thicker (or taller in this case) u make it*/
    background: deeppink;
  }

image/background borders

by making our borders taller by simply defining the height of hr, we can also give the hr a backgrond image value so the border image is "inclosed" in a semantic tag and isnt just an image. this is good as just a good coding practice (i think) and accessibility (i think)

!!of course theres instances were image borders are more suited!! but i find the most frequent times ill use an image border itll be for the same purpose hr was made for

tip: set the height of the hr to the image height

  hr {
    border: none;
    height: 50px;
    background-image: url(hhttps://faegardens333.neocities.org/etc/fruit_line.gif);
    background-size: auto 100%;
      /*
      the width of the image will be automatically determined
      while the height will be 100% of the element width (in this case its 50px)
      */
    background-repeat: no-repeat; /* the bg wont repeat */
    background-position: center; /* bg will be centered */
    image-rendering: pixelated;
  }

  hr {
    border: none;
    height: 32px;
    background-image: url(https://faegardens333.neocities.org/etc/orange_slice.png);
    background-size: auto 100%;
      /*
      the width of the image will be automatically determined
      while the height will be 100% of the element width (in this case its 32px)
      */
      background-repeat: repeat-x; /* the background will repeat horizontally */
      background-position: center; /* bg will be centered */
      }

since hr can be customized just like a div any background type can be used (duh) like linear gradients.

thinner lines look really good with gradients imo ☺

  hr {
    border: none;
    height: 5px;
    background-image: linear-gradient(45deg, yellowgreen, #D4C81E, deeppink);
  }