Download <hr> Lines and Images, or Make Dotted, Solid or Dashed <hr> Lines

I searched the web for available <hr> line designs and fortunately I found one! We can make use of these pretty lines to make our blog lovely.

In this post I will:

• Tell you where to download beautiful <hr> lines.
• Teach you on how to make your own hr lines using HTML or CSS Border Properties.
  
  • make noshade <hr> lines
  • make <hr> with backgrounds - use <hr> images from Smashing Magazine
  • make dotted, solid or dashed <hr> lines

For the time being, I love to use PhotoScape, previously I wrote Make Free Professional Blog Banners with Transparent Backgrounds with the help of the mentioned photo editor. Yet, we all know that Photoshop is far more powerful and it's not free. That is why, when it comes to designing, we try to search for available designs downloadable from the web such as <hr> lines spiced up with different interpretations. I found this one very helpful, in fact, my current SB banner is made from the pretty <hr> design I have chosen.

Well, do you wonder why I got the beautiful "brain" as in "bright idea" background? Don't :)

Visit The <hr>-Contest Results – Download your fresh <hr>-line now! @ Smashing Magazine!

Trivia!

HR stands for Horizontal Ruler. It divides texts or paragraphs in your webpages. HR or <hr> tag or line is controlled by HTML attributes. In order to customize <hr> lines, you need to learn the basic HTML attributes.

• noshade - solid line, if you set your HR lines to 25px high, it will appear as solid line, not a box.
• size - height of your HR line
• width - width, yes, and you can either use pixel or percentage such as 500px, 300px or 100%, 95% etc.
• color - the HR color
• align - it's location, left, right or center
• height - same function with 'size' but used in different HR format (you will know)
• background - without noshade attribute, you can use background (solid color or images like gif, jpeg or png)
• border - it's when you want to see dotted or dashed HR lines

How to make HR lines with noshade attribute?

You will create an HR line or tag as solid line, with size, color and align attributes. Choose one:

<hr noshade size='10px' width='250px' color='#347235' align='center'>

<hr noshade size='10px' width='250px' color='#000000' align='right'>

<hr noshade size='10px' width='250px' color='#733572' align='left'>

It would then appear in your browsers like this:

---

---

---

You can change the size, and color. You can use the Color Code Generator to select the perfect color you want.

How to make HR lines or tag with background image or as background image instead?

<hr style='height:50px; width:500px; color:transparent; background: url(http://media.smashingmagazine.com/images/hr-images-yes/hr4-arthur-rehm.jpg)'/>

It will appear exactly like this:

---

Remember: Note the format I used, I started with style inclosing all the attributes with ''. I also used URL as background by using background:url(the url of your image).

How to make dotted or dashed HR lines?

This is about a little more tweak, since we cannot really create dotted or dashed HR tag using its basic attributes, this time, we will gonna use the CSS border properties. Choose one:

<hr style='width:95%; border:none;border-top:#347235 1px dotted; '/>

<hr style='width:95%; border:none;border-top:#000000 1px solid; '/>

<hr style='width:95%; border:none;border-top:#733572 1px dashed; '/>

The 3 HR lines will appear like this:

---

---

---

Note: Since you are using the border attribute, DO NOT use the height or size attributes of HTML, use border-top:#733572 1px dashed instead. Always add border:none.

You can change the pixel size and color, as well as the border style to solid or dotted :) Let's try another one by changing the pixel size of borders.

<hr style='width:95%; border:none;border-top:#347235 5px dotted; '/>

<hr style='width:95%; border:none;border-top:#000000 5px solid; '/>

<hr style='width:95%; border:none;border-top:#733572 5px dashed; '/>

It will appear like this then:

---

---

---

That's all. And, try all these using the HTML Editor of W3schools!

See you:)

Share it Please

Tweet

Prime Aque

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.