CSS horizontal rule

Horizontal rules are a common element in web design, used to separate content or for decorative purposes. In CSS, we can create horizontal rules in a variety of ways, including using the border property, pseudo-elements, and background https://coder-cafe.com/wp-content/uploads/2025/09/images. This article will detail how to create horizontal rules in various styles using CSS.

Creating a Simple Horizontal Rule Using the Border Property

We can use the border property to create a simple horizontal rule. We define the line style, width, and color by setting the border-bottom property.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Simple Horizontal Line</title> 
<style> 
.horizontal-line { 
border-bottom: 1px solid #000; 
} 
</style> 
</head> 
<body> 
<div class="horizontal-line"></div> 
</body> 
</html>

Output:

CSS Horizontal Rule

In the example above, we create a simple horizontal rule with a line width of 1px and a black color. You can adjust the border-bottom value to change the style of the horizontal rule as needed.

Using Pseudo-Elements to Create Horizontal Lines

In addition to using the border property, we can also use pseudo-elements to create horizontal lines. By setting styles within the :before or :after pseudo-elements of an element, we can achieve a more flexible horizontal line effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Pseudo Element Horizontal Line</title> 
<style> 
.horizontal-line::before { 
content: ""; 
display: block; 
border-bottom: 1px solid #f00; 
} 
</style> 
</head> 
<body> 
<div class="horizontal-line"></div> 
</body> 
</html>

Output:

CSS horizontal line

In the example above, we use the :before pseudo-element to create a horizontal rule. We achieve this effect by setting the content to an empty string, the display to block, and the border-bottom property.

Using a Background Image to Create a Horizontal Rule

Another way to create a horizontal rule is to use a background image. We can achieve this by setting the background image of an element to a thin line.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Background Image Horizontal Line</title> 
<style> 
.horizontal-line { 
background: url('line.png') repeat-x; 
height: 1px; 
} 
</style> 
</head> 
<body> 
<div class="horizontal-line"></div> 
</body> 
</html>

Output:

CSS horizontal line

In the example above, we set the element’s background image to a thin line and use the repeat-x property to repeat the line horizontally across the entire element.

Creating Horizontal Rules with CSS Style Libraries

In addition to manually writing CSS styles to create horizontal lines, we can also use CSS style libraries to quickly achieve various horizontal line effects. Below is an example of creating a horizontal line using the Bootstrap style library.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Bootstrap Horizontal Line</title> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
</head> 
<body> 
<hr class="my-4"> 
</body> 
</html>

Output:

CSS Horizontal Line

In the above example, we imported the Bootstrap style library and used the hr element to create a horizontal line. We set the style of the horizontal line by adding the class attribute.

Using CSS Animation to Create Horizontal Line Effects

In addition to static horizontal lines, we can also use CSS animations to create interesting horizontal line effects, such as flashing and scrolling. Below is an example of using CSS animation to create a flashing horizontal line effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Blinking Horizontal Line</title> 
<style> 
@keyframes blink { 
0% { opacity: 1; } 
50% { opacity: 0; } 
100% { opacity: 1; } 
} 

.horizontal-line { 
border-bottom: 1px solid #00f; 
animation: blink 1s infinite; 
} 
</style> 
</head> 
<body> 
<div class="horizontal-line"></div> 
</body> 
</html>

Output:

CSS Horizontal Line

In the above example, we defined a CSS animation called blink to create a blinking horizontal line effect by setting the transparency of keyframes, and then applied the animation to the horizontal line element.

Creating a Horizontal Line Effect with CSS Gradients

In addition to solid-color horizontal lines, we can also use CSS gradients to create more colorful horizontal line effects. Below is an example of creating a rainbow horizontal line effect using a linear gradient.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Rainbow Horizontal Line</title> 
<style> 
.horizontal-line { 
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
height: 1px; 
} 
</style> 
</head> 
<body> 
<div class="horizontal-line"></div> 
</body> 
</html>

Output:

CSS horizontal line

In the example above, we use the linear-gradient function to create a rainbow gradient background from red to purple, and then apply it to the horizontal line element.

Using CSS Pseudo-Classes to Create Horizontal Line Effects

In addition to pseudo-elements, we can also use CSS pseudo-classes to create special horizontal line effects. Below is an example using the :hover pseudo-class to create a horizontal line that changes color when the mouse hovers.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Hover Horizontal Line</title> 
<style> 
.horizontal-line { 
border-bottom: 1px solid #000; 
transition: border-color 0.3s; 
} 

.horizontal-line:hover { 
border-color: #f00; 
} 
</style> 
</head> 
<body> 
<div class="horizontal-line"></div> 
</body> 
</html>

Output:

CSS Horizontal Line

In the example above, we use the :hover pseudo-class to define the style of the horizontal line when the mouse hovers, and set the transition property to achieve a smooth color transition effect.

Creating Horizontal Line Effects with CSS Grid Layout

CSS Grid Layout is a powerful layout method in modern web design. We can use it to create complex horizontal line effects. Below is an example of using CSS Grid Layout to create multiple horizontal lines.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Grid Layout Horizontal Lines</title> 
<style> 
.grid-container { 
display: grid; 
grid-template-columns: 1fr; 
grid-gap: 10px; 
} 

.horizontal-line { 
border-bottom: 1px solid #000; 
} 
</style> 
</head> 
<body> 
<div class="grid-container"> 
<div class="horizontal-line"></div> 
<div class="horizontal-line"></div>
<div class="horizontal-line"></div>
</div>

</body>

</html>

Output:

CSS Horizontal Line

In the example above, we use CSS Grid Layout to create a grid container with multiple horizontal lines. By setting grid-template-columns to 1fr, each horizontal line occupies the entire width of the container.

Using CSS Flexbox to Create Horizontal Line Effects

In addition to Grid Layout, CSS Flexbox is also a commonly used layout method. We can use Flexbox to create flexible horizontal line effects. Below is an example of using Flexbox to create a horizontal layout.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Flexbox Horizontal Lines</title> 
<style> 
.flex-container { 
display: flex; 
flex-direction: column; 
} 

.horizontal-line { 
border-bottom: 1px solid #000; 
} 
</style> 
</head> 
<body> 
<div class="flex-container"> 
<div class="horizontal-line"></div> 
<div class="horizontal-line"></div> 
<div class="horizontal-line"></div>
</div>

</body>

</html>

Output:

CSS Horizontal Line

In the above example, we use CSS Flexbox to create a vertical flex container and then add multiple horizontal lines to the container, each occupying the entire width of the container.

Using CSS Variables to Create a Horizontal Line Effect

CSS variables are a new feature of CSS3. We can use CSS variables to define reusable styles, including horizontal line styles. Below is an example using CSS variables to create a horizontal line color change effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Variables Horizontal Line</title> 
<style> 
:root { 
--line-color: #000; 
--hover-color: #f00; 
} 

.horizontal-line { 
border-bottom: 1px solid var(--line-color); 
transition: border-color 0.3s; 
} 

.horizontal-line:hover { 
border-color: var(--hover-color); } 
</style> 
</head> 
<body> 
<div class="horizontal-line"></div> 
</body> 
</html>

Output:

CSS Horizontal Line

In the example above, we use the :root pseudo-class to define two CSS variables, one for the default color of the horizontal line and the other for the hover color. We then use these variables in the horizontal line style to achieve the color change effect.

Conclusion

Through this article, you learned how to use CSS to create various horizontal lines, including simple lines, pseudo-elements, background https://coder-cafe.com/wp-content/uploads/2025/09/images, CSS style libraries, CSS animations, CSS gradients, CSS pseudo-classes, CSS Grid Layout, CSS Flexbox, and CSS variables.