In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin…etc.
Approach 1:
- We will use inline CSS inside the tags.
- We will use border-color, border-style property to define the border clearly.
- We can give the width of the bottom border using the border-bottom-width property.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html><html>
<head>
<title>Width Bottom Border CSS</title>
</head>
<body>
<h1 style="border-color : red ;
border-style : solid ;
border-bottom-width : 100px ;">
GFG FOR INTERVIEW PREPARATIONS AND MUCH MORE
</h1>
</body>
</html>
|
Output:
border-bottom-width
Approach 2:
- We used CSS inside the style tag which is also known as Internal CSS.
- We can give the width of the bottom border using the border-bottom-width in pixels and predefined values like thin, thick etc.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html><html>
<head>
<title>Width Bottom Border CSS</title>
<style>
h1 {
border-color: green;
border-style: solid;
border-bottom-width: 70px;
}
h2 {
border-color: rgb(224, 238, 23);
border-style: solid;
border-bottom-width: thin;
}
h3 {
border-color: rgb(23, 123, 238);
border-style: solid;
border-bottom-width: thick;
}
</style>
</head>
<body>
<h1>GFG FOR INTERVIEW PREPARATIONS AND MUCH MORE</h1>
<h2>GFG FOR INTERVIEW PREPARATIONS AND MUCH MORE</h2>
<h3>GFG FOR INTERVIEW PREPARATIONS AND MUCH MORE</h3>
</body>
</html>
|
Output:
border-bottom-width thick