How to Draw Horizontal Line in Html Using Css

Horizontal line in HTML is not a hard concept to decode. However, before we get to that, let's examine the horizontal lines in general. You can add horizontal lines with the help of either CSS or HTML. How does it work? We are going to find the answer to that below.

As we all know, to separate content we can go for horizontal lines. When it comes to CSS, you employ border rules; whereas in the case of HTML we use HR element.

With the help of HTML element, you will be able to add semantic meanings to the underlines you have used. Moreover, CSS will assist you in dressing up your underlines. You are going to learn about both in this article. Moreover, we intend to talk about using just CSS to add underlines to content and text.

To insert thematic break for content, you may use HTML HR tag. As far as the older HTML specifications are concerned, HR tag in HTML was meant to be just a horizontal rule with no semantic meaning attached to it. As of today, there is no visible break in the case of the HR tag. To make it visible, you must make adjustments in CSS. This is an important aspect as it provides better control to the designer to ensure that the theme of the site and HTML HR tag match. This way you can easily add HTML line separator.

• Horizontal Line in HTML Using the HR Tag
• Managing HTML HR Element Size, Color and Other Styles with CSS
• Better Ways to Style HR Tag in HTML with CSSS
• Transforming HTML Lines using the HR Tag

Horizontal Line in HTML Using the HR Tag

HR tag in HTML is nothing new; it has been there since the very beginning as far as we can remember. We always relied on HR tag whenever we needed to add horizontal line in HTML or a horizontal rule. HR tag in HTML remained popular because we can use this attribute in the following scenarios:

• Easy Visual Understanding
• Thematic Break
• No Closing Tag
• Semantics

All that you have to do is to add tag to create a horizontal line. This will draw a line across the whole width. However, it will be restricted to the container. It is easy to remove underline CSS as well.

                                                                            <hr                    />                                                

We used attributes to style the HR element. However, thanks to HTML5, the HR tag turned semantic. Alternatively, in other words, it intimates the browser that there is a paragraph-level thematic break. The same information can be dispatched to an automated system or assistive reading technology.

Here we get a break in the flow of the content instead of a new page. Alternatively, in other words, it lets you know about a change in topic. For instance, you can introduce it at the end of a section. You may introduce it right before a fresh sub-header.

Managing HTML HR Element Size, Color and Other Styles with CSS

Times have changed; you only use CSS to style the HTML HR element. We no longer use attributes for the same. The first advantage is that you use the right system to establish rendering rules. Moreover, it lets you reuse the rules as many times as you want. Your layout becomes more consistent as a result. Last but not least, your code becomes more maintainable.

As far as the rendering of the line by the browser is concerned, it makes it possible by applying the styles to both border and background styles. For the default line, border style is the primary style. You cannot remove the border as it will erase the line as well.

                                                                            <hr                                                                  style                                            ="                                              border                        :                        none;                                            "                                        >                                                

Why is this important?

Well, you are still able to send semantic information to the visual agent with the help of an invisible line. Most importantly, you can get rid of visual clutter which may affect user experience.

Let's take a look at the common HR tag's default styles below:

                                  hr                  {                  display                  :                  block;                  margin-end                  :                  auto;                  margin-start                  :                  auto;                  border                  :                  1px inset;                  overflow                  :                  hidden;                  margin-before                  :                  0.5em;                  margin-after                  :                  0.5em;                  }                              

As far as the width of the line is concerned, you can use the width property to set it. Then you may use the following CSS rule to position it at the center.

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

Now, coming to the thickness of the line, you can adjust it by setting the value of height. You may set the color with the help of the property named background-color. Moreover, if you wish to make the line semi-transparent, then you may use the property named opacity.

                                  hr                  {                  opcaity                  :                  0.6;                  width                  :                  350px;                  height                  :                  150px;                  margin-right                  :                  auto;                  margin-left                  :                  auto;                  background-color                  :#666;                  }                              

When it comes to a typical browser, it goes for a margin which is about half the width of a character. However, you can alter this value according to your preference. As a result, your layout will be enriched with quality white space. This way you can easily distinguish content break.

                                  hr                  {                  width                  :                  80%;                  height                  :                  10px;                  border                  :                  0 none;                  margin-right                  :                  auto;                  margin-left                  :                  auto;                  margin-top                  :                  80px;                  margin-bottom                  :90px;                  background-color                  :#555;                  }                              

This is only the beginning. You can play with a variety of style choices for your horizontal line in HTML besides width and color. As you can see, we have opted for an image of five yellow stars for the background style for the horizontal line. We also made sure that it repeats on the x-axis.

Pro-tip: We recommend setting the background color to transparent. This will prevent you from accidentally revealing the color.

                                  .star-line                  {                  width                  :                  50%;                  height                  :                  20px;                  border                  :                  none;                  margin                  :                  auto;                  margin-top                  :                  5%;                  margin-bottom                  :                  5%;                  background-repeat                  :                  repeat-x;                  background-position                  :                  center;                  background-color                  :                  transparent;                  background-image                  :                  url(images/star.svg)                  ;                  }                              

When you play with the border style, color and size, you make the line look different. You will see a consistent effect in all the modern browsers out there. As you can see in this example, you will find the border as dashed, red and 1px wide:

Better Ways to Style HR Tag in HTML with CSSS

CSS gives you much flexibility, the possibilities are immense. All those background rules can be applied on a horizontal line in HTML. It's an exciting proposition to play with the style.

However, before we explore all those, let's try a few simple tricks in CSS. Here in this example, we are going to turn the line into a dashed line.

Create Dashed Horizontal Line in HTML with CSS

                                  .dashed-border                  {                  width                  :                  50%;                  margin                  :                  auto;                  margin-top                  :                  5%;                  margin-bottom                  :                  5%;                  border                  :                  3px dashed #1A85FD;                  }                              

Create Zig-Zag Line with HTML HR tag using CSS

Next up, we are going to apply the stripe technique to the Zig-Zag line using HR tag. We will be using linear-gradients here. First, we have cleared the border of the horizontal line HTML; also have set 30px as size.

You can go for any value as per your requirement. However, you need to keep in mind that the first 2 linear gradients should have half the height of the CSS horizontal line. Last but not least, you need to set the size of the background.

See the Pen
Create Zig Zag Line with HTML HR Tag by Digamber (@singhdigamber)
on CodePen.

Transforming HTML Lines using the HR Element

If you wish to play with your lines in HTML, then you can turn to CSS3. Thanks to the CSS 3 transform property, you can alter the look significantly. As far as a transformation on the HTML line element is considered, our pick is a rotation.

By choosing this transformation, you can make the HTML tag line slightly diagonal.

Create Slant Line in HTML using CSS3

See the Pen
Slant Line in HTML using CSS3 by Digamber (@singhdigamber)
on CodePen.

You can also turn the draw the slant line completely vertical using the same transformation.

Create Perpendicular or Upward Line in HTML using CSS3

See the Pen
Perpendicular Line in HTML using CSS3 by Digamber (@singhdigamber)
on CodePen.

However, it is not recommended as it might lead to unnecessary disruptions to the layout. But, yes, it is interesting to learn that such transformations are possible.

Final Thought

Well, if you wish to add value to your web layouts, then lines can be used for the same. The page layout enjoys the semantic meaning provided by the HR Tag.

You can make all the customization in CSS. Moreover, you will be quite impressed by the variety of crazy styles which can result in an attractive layout.

Recommended Posts:

How to Draw Horizontal Line in Html Using Css

Source: https://www.positronx.io/create-horizontal-line-html/

Share this post