What is the right way to create a horizontal line with HTML and CSS?

Question

I need to draw a horizontal line after some block, and I have three ways to do it:

1) Define a class h_line and add css features to it, like

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) Use hr tag

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) use it like a after pseudoclass

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

Which way is the most practical?

I would think the <hr> is the most semantic. I mean, isn't that what it's meant for? — j08691
– j08691, Commented Feb 11, 2013 at 21:24
In HTML5 the HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). — Scott Simpson
– Scott Simpson, Commented Feb 11, 2013 at 21:44
Only use <hr> if the line semantically denotes a thematic break. Do not use an <hr> if it's purely decorative; instead use a non-semantic element like a <div> and style it with CSS. — Sean
– Sean, Commented Feb 27, 2023 at 16:39

Jacob · Accepted Answer · 2017-02-09 16:00:43Z

188

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

Here is how html5boilerplate does it:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

edited Feb 9, 2017 at 16:00

Jacob

3,6884 gold badges38 silver badges59 bronze badges

answered Feb 11, 2013 at 21:25

moettinger

5,2242 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacques Marais Over a year ago

Note: Use margin: 1em auto if you want it to always be in the center of the page.

moettinger Over a year ago

@JacquesMarais, not sure that's necessary as it is a block element with no defined width so it would span the width of the entire container anyway.

bevacqua · Accepted Answer · 2013-02-11 21:24:23Z

69

I'd go for semantic markup, use an <hr/>.

Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.

answered Feb 11, 2013 at 21:24

bevacqua

48.8k56 gold badges176 silver badges287 bronze badges

3 Comments

AJMaxwell Over a year ago

<hr> is valid HTML5. It used represent a horizontal rule, but is now defined in semantic terms as a thematic break between content. Most browsers will still display it as a horizontal line unless told otherwise. Source: developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

Ryan Bayne Over a year ago

Title says horizontal line and <hr/> is that so I up this. Title maybe should have read styled horizontal line.

rmcsharry Over a year ago

@RyanBayne ... but but but ... hr = horizontal rule, not line :)

Nadeem Qasmi · Accepted Answer · 2019-01-20 14:10:39Z

22

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}

<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>

answered Jan 20, 2019 at 14:10

Nadeem Qasmi

2,51724 silver badges17 bronze badges

1 Comment

Brian Tompsett - 汤莱恩 Over a year ago

You have not answered the question "Which is the most practical?"

bpoiss · Accepted Answer · 2013-02-11 21:25:03Z

14

In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the <hr> tag represents a horizontal rule.

http://www.w3schools.com/tags/tag_hr.asp

So after definition, I would prefer <hr>

answered Feb 11, 2013 at 21:25

bpoiss

14k4 gold badges37 silver badges49 bronze badges

Comments

serv-inc · Accepted Answer · 2017-04-25 11:19:54Z

13

If you really want a thematic break, by all means use the <hr> tag.

If you just want a design line, you could use something like the css class

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

and use it like

<div class="block_1 hline-bottom">Cheese</div>

edited Apr 25, 2017 at 11:19

answered Apr 24, 2017 at 15:12

serv-inc

38.8k9 gold badges195 silver badges215 bronze badges

Comments

Alia Anis · Accepted Answer · 2018-10-12 06:00:10Z

7

I wanted a long dash like line, so I used this.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}

<div class="dash"></div>

answered Oct 12, 2018 at 6:00

Alia Anis

1,51516 silver badges8 bronze badges

Comments

FredG · Accepted Answer · 2017-08-26 02:01:32Z

0

My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color. This can be done by setting the style directly or by defining a class, for example, like:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

edited Aug 26, 2017 at 2:01

answered Aug 26, 2017 at 1:54

FredG

93 bronze badges

Comments

bruh · Accepted Answer · 2018-02-06 00:10:42Z

0

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

emphasized text

answered Feb 6, 2018 at 0:10

bruh

11

1 Comment

Barthy Over a year ago

Please add a comment explaining your answer.

user13817218 · Accepted Answer · 2020-06-27 02:42:28Z

0

This is relatively simple example and worked for me.

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

Resource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html

answered Jun 27, 2020 at 2:42

user13817218

Comments

danilo · Accepted Answer · 2023-02-27 16:37:06Z

A centered line, with a text in the middle, using margin-top and margin-bottom:

.lineL {
  width: calc(32vw - 24px);
  margin-right:2vw;
  margin-bottom:5px;
  height: 0;
  border: 1px solid #a5a5a5;
  display:inline-block;
}
.lineR {
  width: calc(32vw - 24px);
  margin-left:2vw;
  margin-bottom:5px;
  height: 0;
  border: 1px solid #a5a5a5;
  display:inline-block;
}
.line {
  margin-bottom:40px;
  margin-top:20px;
  margin-left:auto;
  margin-right:auto;
  width:calc(70vw - 24px);
}

<html>
<body>
  <button>Login</button>
  <div class="line">
    <div class="lineL"></div>
    <div style="display:inline-block;width:24px;">OR</div>
    <div class="lineR"></div>
  </div>
  <button>Logout</button>
</body>
</html>

Ram Prasad · Accepted Answer · 2017-09-04 17:04:03Z

-1

it is depends on requirement , but many developers suggestions is to make your code as simple as possible . so, go with simple "hr" tag and CSS code for that.

answered Sep 4, 2017 at 17:04

Ram Prasad

98 bronze badges

Collectives™ on Stack Overflow

What is the right way to create a horizontal line with HTML and CSS?

11 Answers 11

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related