About The Author

Sven is the co-founder and former CEO of Smashing Magazine. He write at his Conterest Blog, where he focuses on blogs, content strategy, writing and publishing … More about Sven ↬

The Big Horizontal Line Archive - Download your <hr> line now!

          We have encouraged our readers to participate in a contest by designing beautiful and creative horizontal lines. It was necessary, since this design-element was slowly disappearing and was often neglected in web design. But it is going to change now. We have received 1290 images and source-files from 384 designers across the globe. The result is an impressive collection of horizontal lines that designers can use for free without any restrictions whatsoever.

          What is <hr />? Basically, it is an old HTML-tag which has been used since the very beginning of the Web. hr stands for the horizontal rule and represents exactly what you would expect — a horizontal line or a horizontal divider. By default, web browsers render hr as a simple horizontal line. In terms of semantics the tag is supposed to clearly separate content blocks. This is often used in design of footers, but also makes sense in other situations — for instance, if you want to separate two blog posts or make the divisions within the content structure sharper.

          However, the design of horizontal lines is quite simple and not really appealing by default. HTML offers designers four styling attributes: align, noshade, width and size. This is the reason why designers often use CSS to make hr’s look a little bit more attractive. Alternatively, one can replace hr’s completely with an image using the background-property in CSS.


          Some designers consider horizontal rule to be unnecessary — after all, you can simple assign some border styling to the container which contains the block. However, hr’s offer more possibilities as you can do whatever you want with a single, standalone HTML-tag. And here is where our contest comes into play.

          Further Reading on SmashingMag:

          We have encouraged our readers to participate in a contest by designing beautiful and creative horizontal lines. It was necessary, since this design-element was slowly disappearing and was often neglected in web design. But it is going to change now. We have received 1290 images and source-files from 384 designers across the globe. The result is an impressive collection of horizontal lines that designers can use for free without any restrictions whatsoever.

          Here is the BIG Gallery of <hr>-Graphics. Some ideas were more popular than the other ones. For instance, a zipper, flowers and ornaments, pencils, Pac-Man, birds, scissors. You can see almost everything from geometrics designs to oriental designs. Our smashing readers show that even a small tiny line can become a piece of art.

          For some users it may be too much, but here the idea counts most. And you can use as a starting point for horizontal lines in your projects. Or you can use some minimalistic designs. Most designs were black/white, and few of them were pretty colorful.

          Colorful Lines

          Andrea Baroni Ideas under the design: mmm….well…starting from a pencil sketch I then created the vectors in Illustrator and refined them in Photoshop.

          hr-line

          Johannes Aagaard

          hr-line

          Ratko Horvat

          hr-line

          Lewis Keogh “Igloo eyes” - Odd alien type eyes that resemble mulitcoloured igloos. Could be adapted to match the colour scheme of a site/blog.

          hr-line

          Ray Pham

          hr-line

          Lewis Keogh “Noah’s arc” - As the name suggests.

          hr-line

          Sandeep Singh

          hr-line

          Isfahan Ashraf

          hr-line

          Darren Northcott

          hr-line

          Darren Northcott

          hr-line

          Johannes Aagard
          The ideas behind my 3 designs are mainly fresh and happy colours, while I love fresh colours. And I’m sure lots of other also does. But also 2 of them are a little unusual, and would fit nicely in a creative blog (in my opinion)

          hr-line

          Jehzeel Laurente I love to experiment and explore the astounding features of Photoshop. In my green hr entry, I tried using pen tool to create bent vectors and combine it with other objects to see what’s the outcome. In my black entry, I just tried to make it simple and elegant by creating circles, lines and label it with binary code. I think it looks boring but it’s simple and clean, perfect for websites and blogs that want simple and clean horizontal divider.

          hr-line

          Jehzeel Laurente

          hr-line

          Jehzeel Laurente

          hr-line

          Cameron Queen

          hr-line

          Jade Gordon I was eager to try out some recently learned techniques in Photoshop. I’ve been falling for patterns and textures, and fine brush details.hr-line

          Heather van de Mark HR Ransom - Cutout letters create an hr divider that is funky and original. It is an array of colors and yet they all complement each other. This is definitely for an alternative blog/web site with humor and edge. I created multiple different backgrounds with jagged edges, so it looks as if they really came from the printed page. The graphic can easily be manipulated to cut the divider to make it longer or shorter or to rearrange the letter order. I didn’t want it to spell anything because that would be distracting.

          hr-line

          Abhijit Sagade I have tried to relate HR with real life observations and have tried to create simplistic visuals out of those ideas.hr-line

          Abhijit Sagadehr-line

          Joel Lueck

          hr-line

          Alistair Symonds

          hr-line

          Mihai Petica

          hr-line

          Vincent Fromaget

          hr-line

          Carina Kornowski

          hr-line

          Yann Guerin

          hr-line

          Olivier Courbet

          hr-line

           

          Jeronimo Strehl This is a shoooooooooooooort break.

          hr-line

          Manasa Malipeddi (the lamp) The idea of this lamp sprouted out of my own wishful thinking. I always wished (and still do) that I had better stuff to write about in my blog; posts that would enlighten somebody, and that is how I thought of a lamp representing enlightenment.

          hr-line

          Manasa Malipeddi (the cat)

          hr-line

          Manasa Malipeddi (the frightened girl) This was what I wanted to do when I realised that my new haircut looked aweful - hide behind a divider!

          hr-line

          Manasa Malipeddi (the knot)

          hr-line

          Dennis Meene

          hr-line

          Dennis Meene

          hr-line

          Ray Pham

          hr-line

          Geo Sukarno

          hr-line

          Priscilla Louzada

          hr-line

          Guilherme Baiao

          hr-line

          Guilherme Baiao

          hr-line

          Ardy I have designed the HR keeping in mind the theme of nature and subtle relaxing ideas (duck in water, clouds, leaves, etc). I feel that these break the monotony of using typical HRs with straight lines. The colors used are also soft and comforting to the latest in designs. I hope you like them. We might plan on making use of the ‘cloudy HR’ within our own website which is currently undergoing major revamping. You can see a general design idea at www.anautix.com/v2

          hr-line

          Vlad Mocanu

          hr-line

          Ardy

          hr-line

          Livia Radvanski

          hr-line

          Reginald Balanga a set of hr graphics with a theme of “Baby’s Clothesline”. Inspired by my 1 year old baby boy. The graphics are in png format and is best used with white background.

          hr-line

          Reginald Balanga

          hr-line

          Reginald Balanga

          hr-line

          Andrea Baroni

          hr-line

          Peter Dzaluk

          hr-line

          Peter Dzaluk

          hr-line

          Fabienne Curty A power cable desperately reaching for its plug.

          hr-line

          Ardy I have designed the HR keeping in mind the theme of nature and subtle relaxing ideas (duck in water, clouds, leaves, etc). I feel that these break the monotony of using typical HRs with straight lines. The colors used are also soft and comforting to the latest in designs. I hope you like them. We might plan on making use of the ‘cloudy HR’ within our own website which is currently undergoing major revamping. You can see a general design idea at www.anautix.com/v2

          hr-line

          Milan van Bruggen For the creatives: A colourful ruler with crayons.

          hr-line

          David Laplante

          hr-line

          Valeria Kuzminska

          hr-line

          Valeria Kuzminska

          hr-line

          Johannes Aagaard
          The ideas behind my 3 designs are mainly fresh and happy colours, while I love fresh colours. And I’m sure lots of other also does. But also 2 of them are a little unusual, and would fit nicely in a creative blog (in my opinion)

          hr-line

          Kyle Theisen All of the designs were inspired by CMYK - nothing more, nothing less. I wanted to create something very simple, yet modern and fun.

          hr-line

          hr-line

          Steve Lam

          hr-line

          Ross Cooper

          hr-line

          Ricardo Mestre

          hr-line

          Tamer Yilmaz

          hr-line

           

          Playing with

          Some designers decided to use classic motifs.

          Milan van Bruggen

          hr-line

          Nathan Lyle

          hr-line

          Björn Rohles After doing some research on web standards, I was surprised that none of the sites I found actually included code to create a visual representation of the topic of “web standards”. I imagine it would be easy to work with the text used to code a site for design purposes (for instance, using the text “div” in the background of divs). This hr is a start to realize this approach.

          hr-line

          Dariusz Rusin

          hr-line

          Vernon Kesner Driving force behind this idea was actually was a recent quarter (I think it was a quarter) I saw. On close inspection, there was actually inscription going around the outer ridge of the quarter. I actually think these turned out really cool.

          hr-line

          Vernon Kesner

          hr-line

          Ricardo Mestre

          hr-line

          Vane Kosturanov

          hr-line

          Mark MacDonald

          hr-line

           

           

          Drawn Lines

          Priyadarshi Kunal

          hr-line

          Chris McLeod

          hr-line

          Yiyi Zhou I’ve always like hand-drawn designs with lots of color. The first two are meant to look somewhat like beads on a string, and the second two are just meant to be fun designs of an owl and snails.

          hr-line

          Yiyi Zhou

          hr-line

          Jehzeel Laurente My pink entry was inspired with pink dirty-like brushes and cartoony buildings. My blue entry was inspired with simple blue lines in different thickness to make it look stylish, simple and creative. And my last entry was the orange arrows from splashed paint. This entry was some kinda accident. I just played around with the paint splatter brush then suddenly arrows appear in my mind and I included it.. and… I’m somewhat satisfied of the outcome.

          hr-line

          Vernon Kesner Driving force behind this idea was actually was a recent quarter (I think it was a quarter) I saw. On close inspection, there was actually inscription going around the outer ridge of the quarter. I actually think these turned out really cool.

          hr-line

          Vernon Kesner

          hr-line

          Sandeep Singh

          hr-line

          Stig Greve

          hr-line

          Dominik Felber

          hr-line

          Dominik Felber

          hr-line

          Eric White

          hr-line

          Brian Litzinger I didn’t have a lot of time to invest in making these HRs, so the first idea that came to mind is what you see. I have no clue if this has been done before…

          hr-line

          Brian Litzinger

          hr-line

          Brian Litzinger

          hr-line

          Abhijit Kumar

          hr-line

          Prijadarshi Kunal

          hr-line

          Prijadarshi Kunal

          hr-line

          Jeronimo Strehl No, this isn’t the end - just a little break…

          hr-line

          Jeronimo Strehl Ok - this is the end, the post is finished - so, get unppluged and go outside.

          hr-line

          Cheng Kam Wang

          hr-line

           

           

          Thin Lines

          These ones can be used for body copy.

          Eva Hellmann

          hr-line

          Eva Hellmann

          hr-line

          Christoph Bach

          hr-line

          Zsolt Kocsmarszky

          hr-line

          Christina Böhme

          hr-line

          Petar Pavlov

          hr-line

          Christoph Bach

          hr-line

          Cameron Queen This is just a design I’ve been playing around with for my own site and thought I’d interpret it for this competition as it’s an avenue I haven’t explored with my ‘donut’ graphics until now.

          hr-line

          Arthur Rehm

          hr-line

          Aren Lavilla

          hr-line

          Vane Kosturanov

          hr-line

          Nour Malaeb Equalizer: Another musical-themed design for a more minimalist blog.

          hr-line

          Nour Malaeb Moustache: Just a fun design for hair-themed blogs, or perhaps a blog for gentlemen. Or the Monopoly guy.

          hr-line

          Amer Aidi

          hr-line

          Dariusz Rusin

          hr-line

          Dariusz Rusin

          hr-line

           

          Black & White

          Jehzeel Laurente I love to experiment and explore the astounding features of Photoshop. In my green hr entry, I tried using pen tool to create bent vectors and combine it with other objects to see what’s the outcome. In my black entry, I just tried to make it simple and elegant by creating circles, lines and label it with binary code. I think it looks boring but it’s simple and clean, perfect for websites and blogs that want simple and clean horizontal divider. My pink entry was inspired with pink dirty-like brushes and cartoony buildings. My blue entry was inspired with simple blue lines in different thickness to make it look stylish, simple and creative. And my last entry was the orange arrows from splashed paint. This entry was some kinda accident. I just played around with the paint splatter brush then suddenly arrows appear in my mind and I included it.. and… I’m somewhat satisfied of the outcome.

          hr-line

          Wojciech Slowacki The birds sitting on a wire are a common sight when you travel between one place and another, so you can say the image of birds separates different places. That’s why I thought it could also separate content as a <hr /> background

          hr-line

          Wojciech Slowacki A cowboy riding off into the sunset - thats a good scene for an ending, so I thought it would be a fitting image for an ending of a post on some blog.

          hr-line

          Nathan Lyle

          hr-line

          Alistair Symonds

          hr-line

          Richard Stellmach

          hr-line

          Vlad Mocanu The general ideea of my images is a modest desire to reinvent the magic of 2D geometry. We live in a world that has forgotten the place it rose from … unfortunately …

          hr-line

          Dennis Meene

          hr-line

          Jon Lucas

          hr-line

          Nathan Kelly

          hr-line

          Dominik Felber

          hr-line

          Vane Konsturanov While I was reading the <hr/> contest post on Smashing a couple of ideas came on my mind. This is what came out.

          hr-line

          Marcin Dembek

          hr-line

          Michael Koloch A tribute to osvaldo cavandoli’s “la linea” cartoon i watched since i was 3 or 4 years old.

          hr-line

          Loveena Rayan

          hr-line

          Emanuel Felipe

          hr-line

          Anggun Pribadi

          hr-line

          Amber Slooten The reason I created a <hr /> like this, was because I personally like silhouettes of women. I thought it was a lot of refreshment. There wansn’t really any inspiration source: It just hit me.

          hr-line

          Jens Fiedler The first designs was forced through an old Mockup for my own portfolio, i liked the idea of usual things for the website functions, so i wanted to make them all look “real”… and the contest, reminds of it, so i made an zipper to make an remindable hr graphic.

          hr-line

          Olivier Courbet

          hr-line

          Andrea Baroni Ideas under the design: mmm….well…starting from a pencil sketch I then created the vectors in Illustrator and refined them in Photoshop. This three themes are pretty naturalistic and on the cute-side I think… Nothing so risky in the end, but I hope enjoyable and unusual.

          hr-line

          Fabienne Curty A horizontal crack in a wall, with a pair of scary eyes staring out - this <hr /> would fit into grungy layouts.

          hr-line

          Fabienne Curty A horizontally torn paperstrip that’s being held together by staples and clips - this <hr /> would fit into papery layouts.

          hr-line

          Sonali Vora

          hr-line

          Jim Hargreaves Elegance meets wit…a classic design for journalistic blogging.

          hr-line

          Jim Hargreaves

          hr-line

          Jim Hargreaves

          hr-line

          Jim Hargreaves

          hr-line

          Stephan Hilbelink

          hr-line

          Stephan Hilbelink

          hr-line

          Daan Weijers

          hr-line

          Giacomo Boccardo

          hr-line

          Ehren Harber

          hr-line

          Ehren Harber

          hr-line

          Mario Santos My inspiration on the firts model/set is to have an end identifier on each part of site/text, nothing like a bar code.

          hr-line

          Mario Santos

          hr-line

           

           

          Abstract and Creative Ideas

          Was nicht in die vorigen Rubriken passte…

          Cornelius Dorgan

          hr-line

          Lewis Keogh “Contemporary bubbles” - Witches cauldron with a modern twist.

          hr-line

          Lewis Keogh “What now” - Working along the lines of, now that the article above has finished what is to follow - as if a line hr break could think.

          hr-line

          Rob MacKay

          hr-line

          Casey Smith

          hr-line

          Elena Plyusnina

          hr-line

          Gavin Steele My clean and simple designs…. its about the content, as a decoration the Hr should not draw the eye away from the content.

          hr-line

          Tiffany Pilgrim This a play-off of the classic ornate divider, but this time hand sketched and with the pencil shavings left behind.

          hr-line

          Zivko Condiv

          hr-line

          Francesca Culatti

          hr-line

          Francesca Culatti

          hr-line

          Abhijit Sagade I have tried to relate HR with real life observations and have tried to create simplistic visuals out of those ideas.hr-line

          Abhijit Sagadehr-line

          Ratko Horvat

          hr-line

          Dennis Meene

          hr-line

          Ratko Horvat

          hr-line

          Tobias Goth So what drove me to do make this blood dripping <HR>? My addiction with the Showtime tv-series Dexter of course. I’m a sucker for the intro that rolls at the beginning of every episode. Here’s my adaptation of it into a horizontal ruler.

          hr-line

          Alex Holt Is a background image that should be right aligned… Subtle, stacked paper design to break the page elegantly.

          hr-line

          Tammy Hart

          hr-line

          Tammy Hart

          hr-line

           

          Vane Konsturanov

          hr-line

          Vane Konsturanov

          hr-line

          Vane Konsturanov

          Lance Gililand

          hr-line

          Lance Gililand

          hr-line

          Aren Lavilla

          hr-line

          Ehren Harber

          hr-line

           

          Nathan Kelly

          hr-line

          Regina Silva

          hr-line

          Rubens Cantuni

          it’s inspired by the fable “Le petit poucet” bu Charles Perrault. This lil kid leaves pebbles behind is walk to find the way back to home, until one day he can’t find any pebbles so he left crumbs, but birds ate them all…

          hr-line

          Rubens Cantuni a ninja running fast leave a trail of dust behind him

          hr-line

          Rubens Cantuni realistic tear repaired with sticky-tape and staples.

          hr-line

          Charles Bamam

          hr-line

          Guilherme Baiao

          hr-line

          Guilherme Baiao

          hr-line

          Katya Shulzhenko Text-style divider says “this is the end” without using brain

          hr-line

          Stephan Hilbelink

          hr-line

          Fouad Badawy

          hr-line

          Alex Souto My theme for the competition is the mouse! This terrible but necessary element of those working on the computer.

          hr-line

          hr-line

          Prijadarshi Kunal

          hr-line

          Sergio Ruiz

          hr-line

          Fabienne Curty ECG - The typical ECG measuring curve, spiced up with a cute heart in the center.

          hr-line

          Carina Kornowski

          hr-line

          Anne Douglas

          hr-line

          Anca Holostencu During the creation of the HR lines, I thought about fluid shapes and a subtle blending in the overall page design. The lines are meant to incite the reader and make her/him complete the nice feeling regarding what she/he read so far and continue with the next chapter.

          hr-line

          Victor Fedyuk

          hr-line

          Joro Yordanov

          hr-line

          Ardy I have designed the HR keeping in mind the theme of nature and subtle relaxing ideas (duck in water, clouds, leaves, etc). I feel that these break the monotony of using typical HRs with straight lines. The colors used are also soft and comforting to the latest in designs. I hope you like them. We might plan on making use of the ‘cloudy HR’ within our own website which is currently undergoing major revamping.

          hr-line

          Maria Paula Figueroa

          hr-line

          Adrian Pauly hr-branch was more of a decorative approach, taking the usual decorative squiggles as a parting point, but rendering it as a much more natural organic element.

          hr-line

          Mihai Petica

          hr-line

           

           

          Thank you!

          We would like to express sincere gratitude to each of designers who participated in our contest! Further contest are already on their way. Please stay tuned.

          So who is the winner of the contest?

          We selected 25 designs which we liked most. Of course, the choice is subjective, but we had to choose the best ones. Please don’t feel angry if you have some other opinion.

          Each design has a number assigned to it. Everybody can vote for his or her favourite design. You decide who is the winner of our contest and who will be awarded with a Wacom Intuos3 9X12 USB Tablet displayed below. The poll will be closed in 4 days. The design with most votes will be awarded with the prize.

          Wacom Tablet

          25 Finalists

          1

          hr-line

          2

          hr-line

          3

          hr-line

          4

          hr-line

          5

          hr-line

          6

          hr-line

          7

          hr-line

          8

          hr-line

          9

          hr-line

          10

          hr-line

          11

          hr-line12

          hr-line

          13

          hr-line

          14

          hr-line

          15

          hr-line

          16

          hr-line

          17

          hr-line

          18

          hr-line

          19

          hr-line

          20

          hr-line

          21

          hr-line

          22

          hr-line

          23

          hr-line

          24

          hr-line

          25

          hr-line

          What is your favourite hr-design?
          ( polls)