How to add dotted horizontal line in your page??

This was one such moment that made me go mad for no big deal.

The issue was simple to get a line of horizontal alignment, as we have with the <HR> tag in XHTML with a dotted decoration. As per the requirement said, i was in need of a “HORIZONTAL LINE”, so as any normal human my mind striked for going with the <hr> tag. SO what next start experimenting with the CSS behind the HR tag. It took all my time and my patience was tested to its peak. Oh god, there were no signs of getting it. All the backgrounds were tested , all the text decorations were applied for the HR tag, finally as usual the last solution – GOOGLE for the solution and so i did. Now wats this, i was no were near to the right solution to this issue. To my dismay it was done with a DIV tag???!!! But how??

This was as simple as u can imagine. The thing required was a DIV tag with no cotent in it. As u can in the below code, this shall give you an idea how really it works,

<div style=” border-bottom: 1px dotted #f4f4f4;”></div>

As is seen in the code, the division has no conetent and has a bottom border of size 1px, the border style as dotted and the color as per your need.

Isn’t that simple 🙂