Make horizontal line in css

How to add horizontal line in HTML?

In this article, we will show you how to add a horizontal line to your webpage using HTML. A horizontal line, also known as a horizontal rule, is a way to separate content on a webpage and can be used for visual appeal or to indicate a change in content.

There are multiple ways to add a horizontal line to your webpage in HTML, but the most common approach is by using the

---

tag. The

---

tag is a self-closing tag that creates a horizontal line on the webpage. This approach is simple and straightforward, and it requires minimal code. However, it does not provide much flexibility in terms of customization. The horizontal line created using the

---

tag will have a default look and feel, and it may not blend well with the design of your webpage.

Another approach to adding a horizontal line in HTML is by using CSS. By using CSS, you can customize the appearance of the horizontal line to match the design of your webpage. You can change the color, width, height, and other properties of the horizontal line to make it fit seamlessly into your webpage.

We will be discussing both these approaches in detail in the later sections of this article with examples and code snippets.

Approaches

There are two main ways to add a horizontal line in HTML −

Approach 1: Using the

---

tag

The first approach to adding a horizontal line in HTML is by using the

---

tag. This approach is quick and easy to implement, making it perfect for situations where you need a simple horizontal line to separate content on your webpage. Additionally, the

---

tag is supported by all major web browsers, so you can be sure that it will be rendered correctly on your webpage. However, the default appearance of the

---

tag may not always match the design of your webpage.

If you need more control over the appearance of the horizontal line, you can use CSS to customize the

---

tag or use the second approach of using CSS. With CSS you can change the color, width, height, and many more properties of the horizontal line to make it look more in sync with your webpage design.

Example

The following is an example of how to add a horizontal line using the

---

tag −

Step 1 − Create an html file (index.html).

Step 2 − Add the

---

tag where you want the horizontal line to appear.

 
Welcome to Tutorials Point
 
This is some text that will appear below the horizontal line.
  

Step 3 − Save the file and view it by opening it in a web browser.

   
Welcome to Tutorials Point
 
This is some text that will appear below the horizontal line.
   

Approach 2: Using CSS

The second approach to adding a horizontal line in HTML is by using CSS. Using CSS to create a horizontal line allows you to have more control over the appearance of the line. You can change the color, and thickness, and even add a background color or an image to the line. Additionally, you can also use CSS animations and transitions to create interesting effects on the line.

By using CSS, you can create a line that stands out and adds a unique touch to your webpage. With CSS, you can also create multiple lines with different styles and apply them to different sections of your webpage, which can be useful for creating visual separations between different elements on your page.

Example

The following is an example of how to add a horizontal line using CSS −

Step 1 − Create an html file (index.html).

Step 2 − Add a tag where you want the horizontal line to appear.

 
Welcome to Tutorials Point
 
This is some text that will appear below the horizontal line.
  

Step 3 − In your CSS file (style.css), use the border-bottom property to create a horizontal line.

border-bottom: 2px solid black;

Step 4 − Apply the class to the tag.

Step 5 − Save the file and view it by opening it in a web browser.

Example

    .horizontal-line 
Welcome to Tutorials Point
 
This is some text that will appear below the horizontal line.
   

Conclusion

In this article, we have shown you two ways to add a horizontal line to your webpage using HTML. The first approach is by using the

---

tag, which is a simple and easy way to add a horizontal line to your webpage. The second approach is by using CSS, which allows you to customize the appearance of the horizontal line to match the design of your webpage. Both approaches are valid and can be used depending on the specific needs of your project.

Источник

How to Style a Horizontal Line

A horizontal rule is commonly used as content or section divider. As a horizontal rule the element is used. Originally the

---

element was styled using attributes. Nowadays, in HTML5, the

---

element tells the browser that there is a paragraph-level thematic break. Let’s see how to style the

---

element with CSS below.

Change the size and position of a horizontal rule

The

---

element is styled with CSS rules instead of attributes. Change the width of the horizontal line by setting the width property and then center it using the margin property.

Example of changing the width and position of a horizontal rule:

html> html> head> title>Title of the document title> style> hr < width: 70%; margin-left: auto; margin-right: auto; > style> head> body> h1>Center Horizontal Line h1> hr /> body> html>

Result

If you want to change the thickness, or height of your horizontal line, add the height property to your

---

style. In this case, you can also set the background-color property for the thick horizontal line.

Example of changing the height and background color of the horizontal rule:

html> html> head> title>Title of the document title> style> hr < width: 100%; height: 30px; margin-left: auto; margin-right: auto; background-color: #b7d0e2; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>

Set the border property to «none» to remove the border of your thick horizontal line.

Example of adding a horizontal rule without a border:

html> html> head> title>Title of the document title> style> hr < width: 100%; height: 30px; margin-left: auto; margin-right: auto; background-color: #b7d0e2; border: 0 none; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>

You can change the color of the horizontal line by setting the border-top property and defining the color. Follow the example to see an illustration of it.

Example of adding a horizontal line with the border-top property:

html> html> head> title>Title of the document title> style> hr < border-top: 5px solid #095484; > style> head> body> h1>Horizontal Line with Height and Background Color h1> hr /> body> html>

Additional style for horizontal lines

Go further with horizontal lines by giving different styles to your

---

element’s border. Check the example code to see what stunning horizontal lines are presented.

Example of adding different styles to horizontal lines:

html> html> head> title>Title of the document title> style> .hr1 < border: 0; height: 3px; background: #095484; background-image: linear-gradient(to right, #ccc, #095484, #ccc); > .hr2 < border: 0; height: 3px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(9, 84, 132), rgba(0, 0, 0, 0)); > .hr3 < height: 15px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(9, 84, 132); > .hr4 < border-top: 3px double #095484; > .hr5 < background-color: #fff; border-top: 2px dashed #095484; > .hr6 < border-top: 3px dotted #095484; > .hr7 < height: 30px; border-style: solid; border-color: #095484; border-width: 1px 0 0 0; border-radius: 20px; > .hr8 < display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #095484; border-width: 0 0 1px 0; border-radius: 20px; > style> head> body> h3>Gradient Horizontal Line h3> hr class="hr1" /> h3>Gradient Transparent h3> hr class="hr2" /> h3>Single-direction Drop Shadow h3> hr class="hr3" /> h3>Double h3> hr class="hr4" /> h3>Dashed h3> hr class="hr5" /> h3>Dotted h3> hr class="hr6" /> h3>Rounded Corners h3> hr class="hr7" /> hr class="hr8" /> body> html>

Use a background image as a horizontal rule

If you want to set an ornament or image as a horizontal rule for your website, you can add a background image to your horizontal rule with the help of the CSS background property. Also, set the height equal to the height of your image (or how much part you want from the image), and border: none, so as your image will look like as a horizontal line.

Example of adding a background image as a horizontal line:

html> html> head> title>Title of the document title> style> .hr1 < height: 25px; background: url(/uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg) no-repeat center; border: none; > .hr2 < height: 25px; background: url(/uploads/media/default/0001/01/295e26d0bdf4d635c8887a6b0f37b61d7c69c5fc.png) no-repeat center; border: none; > .hr3 < height: 25px; background: url(/uploads/media/default/0001/01/09a69b0ad1525926a508356955843cf84306fd85.png) no-repeat center; border: none; > .hr4 < height: 20px; background: url(/uploads/media/default/0001/01/12fbe0b5b3d06c7e379d646068faa12f70452638.png) no-repeat center; border: none; > .hr5 < height: 50px; background: url(/uploads/media/default/0001/01/7d5f2a204567da4df1c1d7e5017d7b510ef56619.jpeg) no-repeat center; border: none; > .hr6 < height: 70px; background: url(/uploads/media/default/0001/01/fb69fe21cc880d96b3267efaa88cd72288a77fef.png) no-repeat center; border: none; > style> head> body> h1>Horizontal Lines with Images h1> hr class="hr1" /> br /> hr class="hr2" /> br /> hr class="hr3" /> br /> hr class="hr4" /> br /> hr class="hr5" /> hr class="hr6" /> body> html>

How to add attributes to a horizontal line across the page?

You can add attributes to a horizontal line in HTML by using the

---

tag and adding the desired attribute(s) as HTML attributes within the opening tag. Here is an example:

label="Horizontal line across the page">

In this example, we have added three attributes to the

---

element:

1. style: This attribute sets the inline style of the element. In this case, we have set the border property to create a solid black line. You can use any CSS property here to style the line as desired.
2. id: This attribute sets the unique identifier for the element. This can be used to target the element with JavaScript or CSS.
3. class: This attribute sets the CSS class(es) for the element. This can be used to apply common styles to multiple elements with the same class.
4. aria-label: This attribute is used to provide an accessible label for the element. It is read out loud by screen readers and is helpful for users who are visually impaired.

You can add any valid HTML attribute to the

---

tag in this way.

Источник