Open In App
Related Articles

CSS border-bottom Property

Improve Article
Save Article
Like Article

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.


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

Default Value : Its default value is initial. 

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

Property Values:

  • border-width: It is used to set the width of 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.



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


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

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Opera 3.5 and above
  • Safari 1.0 and above
Last Updated : 01 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials