Get Our Free Ebook
Beginners Guide to HTML


  Tutorials HTML and CSS Tutorials Horizontal Lines

Horizontal Lines Tutorials Aug 02, 2004

Horizontal lines are very useful separating your page to different sections, to add a simple horizontal line just type <hr>, and you will get this:

But you can also create customized lines to fit with your webpage and to give you better mastery of the space you are manipulating on your page.



 <hr color="#c7c34c" size="2" width="50%">

gives this :

  • Color: color of the line : <hr color="#xxxxxx">
  • Size: Height of Line expressed in pixels : <hr size="x">
  • Width: Width of the line expresed either in percentage (%) or in pixels (in my example it is 50% of the original size) : <hr width="x%"> or <hr width="x">

More Advanced:

This :

<hr width="400" style="border: 3px dotted #0099CC" color="#000000" size="4">


In this case we used  style :

  • Border width is 3pixels (3 px)
  • It is dotted
  • Base color is black : #000000
  • Dots colored in blue: #0099CC

A last example to explain more, if still needed ;) :


<hr width="400" style="border: 2px dashed #C0C0C0" color="#FFFFFF" size="6">


In this case just above :

  • Border width is 2pixels (2 px)
  • It is dashed
  • Base color is white : #FFFFFF
  • Dashes colored in silver: #C0C0C0

Possible styles are:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • outset
  • inset
  • ridge

That's all I have to say about the horizontal lines !!

subscribe to newsletter