Open In App

CSS border-bottom Property

Improve
Improve
Like Article
Like
Save
Share
Report

The border-bottom property in CSS is used to set all bottom border properties in one line. It is used to set the width, style, and color of the bottom border. The default value is initial. 

Syntax

border-bottom: border-width border-style border-color|initial|inherit; 

Property Values

border-bottom is a shorthand to set the below property values:

Values

Descriptions

border-width

It is used to set the width of the border.

border-style

It is used to set the style of border. Its default value is ‘none’.

border-color

It is used to set the color of border.

initial

This property is used to set border-bottom to its default value.

inherit

This property is inherited from its parent.

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>border-bottom property</title>
 
    <!-- border-bottom CSS property -->
    <style>
        h1 {
            border-bottom: 5px solid green;
        }
 
        h2 {
            border-bottom: 4px dotted black;
        }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>border-bottom property</h2>
</body>
 
</html>


Output: 

Supported Browsers

The browser supported by border-bottom property are listed below: 

  • Google Chrome 1.0
  • Edge 12.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

Last Updated : 14 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads