How to set the width of the bottom border in CSS ?
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:
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
Last Updated :
16 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...