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:
- 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:
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: