Grow your CSS skills. Land your dream job.

“hr” tag over “border” property

  • # July 4, 2013 at 12:47 pm

    Recently when doing a header, where I have the top content, a divisor then the actual content, I’ve wondered what’s the best approach to follow on making that divisor element. [Made this snippet to exemplify the case](http://codepen.io/rafaelrinaldi/pen/dFnGC).
    We have the `


    ` tag for stuff like that but I often see people using the CSS `border` property to achieve the same result.
    What’s the best approach on this case? Which one has a better semantic? In theory, the tag will be one more element to be rendered so I’m assuming the best way to do this is by using the CSS property.

    Anyway, want to hear your opinions on that. Thanks!

    # July 4, 2013 at 12:54 pm

    I’ll go with the CSS border every time. Though I’d do it a little differently than you and put the border on the `

    ` instead of the `

    `: http://codepen.io/ggilmore/pen/52e2978ebcfe2c1ad8f00d42c7dd6343

    That way you can have no subheader and the border no longer appears.

    # July 4, 2013 at 1:02 pm

    Yeah, you’re right! I just wanted to exemplify what I was saying. The border going on top of the subtitle makes more sense. I’ve updated [the snippet](http://codepen.io/rafaelrinaldi/pen/dFnGC)!

    Thanks.

    # July 4, 2013 at 6:04 pm

    > In theory, the tag will be one more element to be rendered so I’m assuming the best way to do this is by using the CSS property.

    Do it with a border if you can do so, definitely.
    If you need something more fancy than a border, use a pseudo-element falling back to a border.
    If you need something more fancy than a pseudo-element, use a data-url encoded image.

    Edit: “fancier”?

    # July 4, 2013 at 6:19 pm

    Thanks for the input Hugo!

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

You must be logged in to reply to this topic.

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