how to make decorative horizontal line on page

  • Suzannah


    Hello and thank you in advance for your assistance.

    On this page … … you will see red lines between sets of info.

    ( on her Services page.)

    I used the underline key which is clearly not correct so how can I improve this line in code and looks please?




    Kenneth John Odle


    Easy way:

    In HTML editor, add this where you want line to appear:

    <hr class="red-flourish">

    And in your custom CSS, add

    .red-flourish {
    color: #f00;
    height: 8px;

    Another easy way:

    Find a particularly decorative flourish (a good Google image search term), and then add it as an image wherever you would like the line to appear.

    Yet another easy way:

    In HTML editor, add

    <div class="red-flourish"></div>

    and in custom CSS, add

    .red-flourish {
    border-top: dotted 1px #f00;
    border-bottom: solid 1px #f00;
    height: 6px;

    I didn’t test that last one, but it should work.



    As always Kenneth, your answers are very helpful!



    Kenneth John Odle


    I’m not entirely sure how “proper” that last one is. If valid code is a big concern of yours, you might want to run it through a validator.

    Also, I missed a period in that second rule. I’ve corrected it now. But if you copied and pasted and it doesn’t work, check for a missing period.



    Almost there … I think.

    I understand the first option i.e. the hr code and it almost works!

    The line look great except that the color isn’t showing?

    What am I missing please and thank you?


    Kenneth John Odle


    Try adding:

    background-color: #f00;

    See this page:

    and try using Firebug on some of their examples. Enlightening!



    Yes some great examples and I got it to work.

    Thanks so much,


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

  • You must be logged in to reply to this topic.