CSS setting horizontal line style
Setting Horizontal Rule Styles with CSS
In web design, horizontal rules are common dividing elements, used to separate different content areas or emphasize a specific section. Horizontal rules can be styled in CSS in a variety of ways, including using the border property and pseudo-elements. This article will detail how to style horizontal rules with CSS and provide several sample code examples for your reference.
Using the border property to set a horizontal rule
Example 1: Using the border property to set a horizontal rule
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 2: Setting the color and width of the horizontal line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
border: 2px dashed red;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 3: Set the horizontal line style to a dashed line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
border: 1px dashed black;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Using Pseudo-elements to Set Horizontal Lines
Example 4: Using Pseudo-elements to Set Horizontal Lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 0;
border: none;
border-top: 1px solid black;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 5: Setting the color and width of the horizontal line of a pseudo-element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 0;
border: none;
border-top: 2px dashed red;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 6: Set the pseudo-element horizontal line style to a dotted line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 0;
border: none;
border-top: 1px dashed black;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Using Background Images to Set Horizontal Lines
Example 7: Using Background Images to Set Horizontal Lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 1px;
background: url('line.png') repeat-x;
border: none;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 8: Setting the height and repeat mode of the horizontal line of the background image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 2px;
background: url('line.png') repeat-y;
border: none;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 9: Setting the Position and Size of the Background Image Horizontal Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 3px;
background: url('line.png') center center/80% repeat-x;
border: none;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Using CSS Pseudo-Classes to Style Horizontal Lines
Example 10: Using CSS Pseudo-Classes to Style Horizontal Lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr::after {
content: '';
display: block;
border-top: 1px solid black;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 11: Setting the Color and Width of the CSS Pseudo-Class Horizontal Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr::after {
content: '';
display: block;
border-top: 2px dashed red;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 12: Set the CSS Pseudo-Class Horizontal Line Style to Dashed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr::after {
content: '';
display: block;
border-top: 1px dashed black;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Using CSS Gradients to Style Horizontal Lines
Example 13: Using CSS Gradients to Style Horizontal Lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 1px;
background: linear-gradient(to right, red, blue);
border: none;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 14: Setting the Direction and Color of a CSS Gradient Horizontal Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 2px;
background: linear-gradient(to left, green, yellow);
border: none;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 15: Set the Opacity and Angle of a CSS Gradient Horizontal Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
hr {
height: 3px;
background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
border: none;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Use CSS Animation to Set the Horizontal Line
Example 16: Use CSS Animation to Set the Horizontal Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
@keyframes lineAnimation {
0% { width: 0; }
100% { width: 100%; }
}
hr {
height: 1px;
background: black;
border: none;
animation: lineAnimation 2s forwards;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 17: Setting the Duration and Effect of a CSS Animated Horizontal Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
@keyframes lineAnimation {
0% { width: 0; }
100% { width: 100%; }
}
hr {
height: 2px;
background: red;
border: none;
animation: lineAnimation 3s ease-in-out forwards;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Example 18: Setting the Delay and Repeat Times of a CSS Horizontal Line Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Line Example</title>
<style>
@keyframes lineAnimation {
0% { width: 0; }
100% { width: 100%; }
}
hr {
height: 3px;
background: blue;
border: none;
animation: lineAnimation 2s ease-in-out 1s infinite alternate;
}
</style>
</head>
<body>
<h1>Welcome to geek-docs.com</h1>
<hr>
<p>This is a paragraph below the horizontal line.</p>
</body>
</html>
Output:
Summary
This article introduced various ways to style horizontal lines, including using the border property, pseudo-elements, background https://coder-cafe.com/wp-content/uploads/2025/09/images, CSS pseudo-classes, CSS gradients, and CSS animations. Through these sample codes, you can flexibly use different methods to create beautiful horizontal line effects in your web pages.