border-bottom - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-bottom

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-bottom

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>

Related Tutorials