CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



border-bottom-color

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS is used to style the HTML elements and make them look visually appealing. One of the important properties of CSS is the border-bottom-color property. In this article, we will discuss the border-bottom-color property in detail.

Brief Explanation of Border-Bottom-Color

The border-bottom-color property is used to set the color of the bottom border of an element. It is a part of the border shorthand property, which is used to set the border properties of an element in a single declaration. The border shorthand property includes the border-width, border-style, and border-color properties. The border-bottom-color property is used to set the color of the bottom border of an element.

The syntax of the border-bottom-color property is as follows:

selector {
  border-bottom-color: color;
}

Here, the selector is the HTML element to which the border-bottom-color property is applied, and the color is the color value to be set for the bottom border of the element.

Code Examples

Let's take a look at some code examples to understand the usage of the border-bottom-color property.

Example 1:

In this example, we will set the border-bottom-color property to red for the h1 element.

<style>
  h1 {
    border-bottom-color: red;
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }
</style>

<h1>This is a heading</h1>

In the above code, we have set the border-bottom-color property to red for the h1 element. We have also set the border-bottom-width and border-bottom-style properties to 2px and solid respectively to create a solid red border at the bottom of the h1 element.

Example 2:

In this example, we will set the border-bottom-color property to blue for the table element.

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border-bottom-color: blue;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding: 10px;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
    <td>Female</td>
  </tr>
</table>

In the above code, we have set the border-bottom-color property to blue for the th and td elements of the table. We have also set the border-bottom-width and border-bottom-style properties to 1px and solid respectively to create a solid blue border at the bottom of the th and td elements. We have also added some padding to the th and td elements to make the table look visually appealing.

Example 3:

In this example, we will set the border-bottom-color property to green for the input element on focus.

<style>
  input:focus {
    border-bottom-color: green;
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }
</style>

<label for="name">Name:</label>
<input type="text" id="name" name="name">

In the above code, we have set the border-bottom-color property to green for the input element on focus. We have also set the border-bottom-width and border-bottom-style properties to 2px and solid respectively to create a solid green border at the bottom of the input element when it is in focus.

Conclusion

The border-bottom-color property is an important property of CSS, which is used to set the color of the bottom border of an element. It is a part of the border shorthand property, which is used to set the border properties of an element in a single declaration. We hope this article has helped you understand the usage of the border-bottom-color property in CSS.

References

Activity