border-bottom - HTML CSS CSS Property

Description

The border-bottom CSS property sets the width, style, and color of the bottom border of an element.

It is a shorthand property for setting the individual bottom border properties including:

border-bottom-width
border-bottom-style
border-bottom-color

The following table summarizes the border-bottom property.

Item	Value
Default value:	See individual properties
Applies to:	All elements
Inherited:	No
Animatable:	Yes, See individual properties.

Syntax

The syntax of the property is as follows:

border-bottom:     [ border-bottom-width border-bottom-style border-bottom-color ] | initial | inherit

Property Values

The following table describes the values of this property.

Value	Description
border-bottom-width	Sets the width of the bottom border.
border-bottom-style	Sets the line style of the bottom border.
border-bottom-color	Sets the color of the bottom border.
initial	Sets this property to its default value.
inherit	If specified, the associated element takes the computed value of its parent element border-bottom property.

The example below shows the border-bottom property.

Example

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-bottom property</title>
  <style type="text/css">
    h1 {<!--from ww w  .  jav a2  s  .com-->
      border-bottom: 5px dashed #ff0000;
    }
    p {
      border-bottom: 3px dotted #00ff00;
    }
    </style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>