How to use the border property In CSS
The border property is a shorthand property that allows you to set the style, width, and colour 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: Implementation to style an hr element with CSS using the border property.
<!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:
Output
How to Style an hr Element with CSS?
The <hr> element in HTML is used to create a horizontal rule or a thematic break between different sections of a webpage. By default, it appears as a solid, thin line spanning the entire width of its parent container. However, you can customize the appearance of the <hr> element using CSS to better align with your website’s design and style.
These are the following approaches:
Table of Content
- Using the border property
- Using the background property
- Using the height and background-color properties