CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS provides a wide range of properties to style the HTML elements. One of the most commonly used properties is the border-bottom property.
The border-bottom property is used to add a bottom border to an HTML element. It is a shorthand property that allows you to set the width, style, and color of the bottom border in a single declaration. The syntax of the border-bottom property is as follows:
<element> {
border-bottom: <width> <style> <color>;
}
The <width> specifies the width of the bottom border. It can be set in pixels, ems, rems, or any other valid CSS unit. The <style> specifies the style of the bottom border. It can be set to solid, dotted, dashed, double, groove, ridge, inset, outset, or none. The <color> specifies the color of the bottom border. It can be set to any valid CSS color value.
Here are some examples of using the border-bottom property:
<h2 style="border-bottom: 2px solid black;">Heading with a solid black bottom border</h2>
<p style="border-bottom: 1px dotted red;">Paragraph with a dotted red bottom border</p>
<div style="border-bottom: 3px double blue;">Div with a double blue bottom border</div>
In the first example, we have added a solid black bottom border to an <h2> element with a width of 2 pixels. In the second example, we have added a dotted red bottom border to a <p> element with a width of 1 pixel. In the third example, we have added a double blue bottom border to a <div> element with a width of 3 pixels.
You can also use the border-bottom-width, border-bottom-style, and border-bottom-color properties separately to set the width, style, and color of the bottom border, respectively. Here is an example:
<h3 style="border-bottom-width: 2px;
border-bottom-style: dashed;
border-bottom-color: green;">
Heading with a dashed green bottom border
</h3>
In this example, we have used the border-bottom-width, border-bottom-style, and border-bottom-color properties separately to set the width, style, and color of the bottom border of an <h3> element.
The border-bottom property can also be used with the border-top, border-left, and border-right properties to set the borders of all four sides of an HTML element. Here is an example:
<div style="border: 1px solid black;
border-bottom: none;">
Div with a top, left, and right border, but no bottom border
</div>
In this example, we have set a 1 pixel solid black border to all four sides of a <div> element using the border property. We have then used the border-bottom property to remove the bottom border of the element.
The border-bottom property is a versatile property that can be used to add a bottom border to any HTML element. It is easy to use and provides a wide range of options to customize the appearance of the border.