Draw a horizontal line in React relates to HTML and CSS. There are a lot of ways to do it. I will show you some. Let’s go into detail.
Draw a horizontal line in React
Solution 1: Use <hr> tag
If you use a method that already exists in HTML or wants to use pure HTML <hr> tag is suitable for you.
Hr tag helps you to separate two paragraphs in many ways, and you can set it, but the most common is by a horizontal line. Hr tag support both HTML event attributes and HTML global attributes.
Example:
import './App.css'
function App() {
return (
<div className="App">
<h1 >Hello from LearnShareIT</h1>
<hr style={{width:'20%',height:'3px',backgroundColor:'black'}}></hr>
<h1>React is a JavaScript library for building user interfaces</h1>
<hr style={{width:'50%',height:'10px',backgroundColor:'green',borderRadius:'5px'}}></hr>
<h1>never give up is an important thing if you want learning programming language</h1>
<hr/>
<h1> be patient and be persist</h1>
</div>
)
}
export default App
Output:
’<hr/>’ is a self-closing tag. You can right in both ways is ‘<hr></hr>’ or ‘<hr/>’ it is all fine. And it also can use a ‘style’ prop to style the element. Here I only use common style properties like width and height to resize the horizontal line, backgroundColor to change the color of the horizontal line, and borderRadius to round the horizontal line border. It is much more for you to play with.
Solution 2: Use Style element
You can also style the HTML element to make its shape a horizontal line. The most common element used is ‘<div>’. I will make a page like a page above, not with a ‘<hr>’ tag but a ‘<div>’ tag.
Example:
import { useState } from 'react'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<div className="App">
<h1 >Hello from LearnShareIT</h1>
<div style={{width:'20%',height:'3px',backgroundColor:'black',position:'relative',left:'40%'}}></div>
<h1>React is a JavaScript library for building user interfaces</h1>
<div style={{width:'50%',height:'10px',backgroundColor:'green',borderRadius:'5px',transform:'translateX(50%)'}}></div>
<h1>never give up is an important thing if you want learning programming language</h1>
<div style={{width:'100%',height:'1px',backgroundColor:'black'}}></div>
<h1> be patient and be persist</h1>
</div>
)
}
export default App
Output:
Here with only the <div> tag and style property, I also can draw the horizontal line like the <hr> tag.
Summary
I showed you how to draw a horizontal line in React in this tutorial. You can use pure HTML with <hr> tag or combine normal HTML tag like <div> or <span> tag with CSS attribute. When you feel familiar with react js, you can create more way and more beautiful horizontal lines.
Maybe you are interested:
- Get the Height of an Element using a Ref in React
- get window width and height in react
- Remove the underline of a Link in React

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm