Grow your CSS skills. Land your dream job.

how to make two horizontal divider lines in css

  • # July 11, 2013 at 7:59 pm

    im trying to emulate this…im not sure whether to just use a .jpeg of it or write it in css…ideas?

    https://docs.google.com/document/d/1odQNG0vZYpsBeBggXlxvWXFq2pXq9SQmQeOCzd6NHp0/edit?usp=sharing

    the lines are for text/image boxes. i need to do a single line w a drop shadow and for the footer i need to lines on top of each other but the top line needs to be thicker

    # July 11, 2013 at 8:11 pm

    Top line either image or standalone DIV.

    Double line either image or a standalone DIV inside the parent DIV for the first, thicker line.

    # July 11, 2013 at 8:29 pm

    [Here ya go](http://codepen.io/kbrec85/details/KtCld “”) Play around with that a bit until you like it.

    [Here’s Chris’ article](http://css-tricks.com/simple-styles-for-horizontal-rules/ “”) on how all that stuff works

    # July 11, 2013 at 8:31 pm

    Both can be done with pseudo-elements: http://jsfiddle.net/sxmFR/

    # July 11, 2013 at 9:35 pm

    Nice, didn’t realise you could do double lines with different thicknesses.

    # July 11, 2013 at 9:36 pm

    Doh! Of course it’s not a double line… slow today… ;)

    So much as I said, but with HR rather than DIV. Preference would you say, or better syntax?

    # July 12, 2013 at 1:28 pm

    but is there a prefix for this bc it isnt working in chrome

    # July 12, 2013 at 1:31 pm

    Just the usual -webkit etc for box-shadows etc…if required.

    And the fiddle (http://jsfiddle.net/sxmFR/) works fine in my Chrome.

    # July 12, 2013 at 1:34 pm

    it works for me in codepen and it shows in fiddle but when i enter the code in my project and test in the browser it doesnt work…retard problems

    # July 12, 2013 at 1:40 pm

    YEAH AND PAUL I TRIED YOUR CODE ALSO IN DREAMWEAVER AND IT STILL WONT LOAD IN THE BROWSER..WEIRD

    # July 12, 2013 at 1:41 pm

    nvm…i guess my computer was buggin out..it works thanks man…..as usual

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".