How to Style an hr Element with CSS?
Last Updated :
22 Oct, 2024
The <hr> element in HTML is used to create a horizontal line or thematic break between sections of a webpage. By default, it shows as a solid, thin line that spans the width of its container. You can easily customize the appearance of the <hr> element using CSS to match your website's design and style. This allows you to adjust the thickness, color, and style of the line for a more personalized look.
These are the following approaches:
Using the border property
The border property is a shorthand property that allows you to set the style, width, and color of an element's border in a single declaration.
Syntax:
border: border-width border-style border-color;
Parameter:
- border-width: Specifies the thickness of the border. It can be a length value (e.g., 2px, 0.5rem) or one of the predefined values (thin, medium, thick).
- border-style: Specifies the line style of the border. Possible values include solid, dashed, dotted, double, groove, ridge, inset, and outset.
- border-color: Specifies the color of the border. It can be a named color (e.g., red), a hexadecimal value (e.g., #333), an RGB value (e.g., rgb(51, 51, 51)), or a CSS color keyword (e.g., transparent).
Example: In this example, different border styles (solid, dashed, and dotted) are applied to <hr> elements to create visually distinct horizontal lines for section separation.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Styling HR Elements</title>
<style>
/* Example 1: Solid line */
.border-hr-solid {
border: 2px solid #333;
}
/* Example 2: Dashed line */
.border-hr-dashed {
border: 3px dashed #ff6347;
}
/* Example 3: Dotted line */
.border-hr-dotted {
border: 1px dotted #008000;
}
</style>
</head>
<body>
<h1>Using the border property</h1>
<h2>Example 1: Solid line</h2>
<hr class="border-hr-solid">
<h2>Example 2: Dashed line</h2>
<hr class="border-hr-dashed">
<h2>Example 3: Dotted line</h2>
<hr class="border-hr-dotted">
</body>
</html>
Output:
.png)
OutputUsing the background property
The background property can be used to set the color and thickness of the <hr> by combining background-color and height.
Syntax:
background-color: color;
height: height-value;
Parameter:
- background-color: Specifies the background color of the element. It can be a named color, a hexadecimal value, an RGB value, or a CSS color keyword.
- height: Specifies the height of the element. For the <hr> element, it determines the thickness of the horizontal rule.
Example: In this example, the background color and height of <hr> elements are customized to create distinct horizontal lines (dark gray, light blue, and red) for better visual separation.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Styling HR Elements</title>
<style>
/* Example 1: Dark gray line */
.background-hr-dark {
background-color: #333;
height: 5px;
}
/* Example 2: Light blue line */
.background-hr-light-blue {
background-color: #87cefa;
height: 10px;
}
/* Example 3: Red line */
.background-hr-red {
background-color: #ff0000;
height: 3px;
}
</style>
</head>
<body>
<h1>Using the background property</h1>
<h2>Example 1: Dark gray line</h2>
<hr class="background-hr-dark">
<h2>Example 2: Light blue line</h2>
<hr class="background-hr-light-blue">
<h2>Example 3: Red line</h2>
<hr class="background-hr-red">
</body>
</html>
Output:
.png)
OutputUsing the height and background-color properties
For better readability and maintenance, you can style the <hr> using separate height and background-color properties.
Syntax:
height: height-value;
background-color: color;
Example: In this example, the height and background color of <hr> elements are customized to create visually distinct lines (green, orange, and purple), adding separation and enhancing layout structure.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Styling HR Elements</title>
<style>
/* Example 1: Green line */
.height-background-hr-green {
height: 8px;
background-color: #008000;
}
/* Example 2: Orange line */
.height-background-hr-orange {
height: 6px;
background-color: #ffa500;
}
/* Example 3: Purple line */
.height-background-hr-purple {
height: 4px;
background-color: #800080;
}
</style>
</head>
<body>
<h1>
Using the height and
background-color properties
</h1>
<h2>Example 1: Green line</h2>
<hr class="height-background-hr-green">
<h2>Example 2: Orange line</h2>
<hr class="height-background-hr-orange">
<h2>Example 3: Purple line</h2>
<hr class="height-background-hr-purple">
</body>
</html>
Output:
.png)
Output
Similar Reads
How to style even and odd elements using CSS ?
In this article, we will learn how to style even and odd elements using CSS. Styling every element uniformly may not always be the best approach. you'll explore multiple approaches to differentiate between even and odd elements. This is particularly valuable for designing lists, tables, or structure
3 min read
How To Style a Table with CSS?
A table organizes data in rows and columns, making information easy to read and compare, like a spreadsheet or chart. To style a table with CSS, use properties like border for cell borders, padding for spacing, text-align for alignment, and background-color to color rows or headers for clarity.Appro
2 min read
How to link CSS with HTML Document?
CSS is probably the most powerful style language in web development. It allows you to keep presentations of a document separate from the structure using CSS, making the maintenance and updating of a web page quite easy. CSS provides possibilities to style HTML elements, handle layouts, and create re
5 min read
How to Change Font Style in CSS?
Font style is an important element that enhances the readability of the text. CSS provides several properties to change the text appearance and font style. The font style property allows you to define how the text should appear normal, italic, or oblique.Table of ContentDifferent Methods to Change F
3 min read
How to Set the Fixed Width of a Span Element in CSS ?
Setting a fixed width of a span element is useful when we need to control the size of a specific inline element. The span element is mostly used in styling specific parts of text and other inline elements. There are various approaches to setting a fixed width of a span element in CSS including, widt
4 min read
How to Select the Next Element in CSS ?
Combinators: When classes are combined, they become more specific. This allows you to target classes further down in your template without affecting other elements. Selectors can be combined into a combinator: Combinator of Descendent, Child, Sibling, and General Sibling. The Descendent Combinator i
3 min read
How to set padding inside an element using CSS?
In this article, we are going to see how to set padding inside an element using CSS. Padding is considered as the space between content and its border. The padding creates space inside defined borders. The difference between padding and margin is that margin creates space outside borders and padding
1 min read
How to style a dropdown using CSS?
We will learn how to style the dropdown list using CSS and explore its implementation through examples. Dropdown menus are commonly used to allow users to select an option from a predefined list. Styling them properly can enhance your website's user experience and visual appeal.What is a <select
3 min read
How to target components around or within other elements in CSS ?
In this article, we will see how can we target components around or within other elements. This task can be achieved by using the target selector. The target selector in CSS is used to represent a unique element with an id attribute matching the URL’s fragment and It can be used to style the current
2 min read
How to set the color of an element border with JavaScript ?
In this article, we will see how to set the color of an element's border with JavaScript. To set the color of an element's border with JavaScript, we can use the element's style property. Method 1: First, we will create a text element and then apply some CSS styles including the border color of the
2 min read