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