border-bottom-style - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-bottom-style

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

Description

The border-bottom-style CSS property sets the style of an element's bottom border individually.

The following table summarizes the usages context and the version history of this property.

Item Value
Default value: none
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 

border-bottom-style:     none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
noneNo border will be displayed.
hidden Same as 'none'
dotted a series of dots.
dashed a series of short line segments i.e. dashes.
solid a single solid line.
double a two parallel solid lines.
groove Looks like carved into the canvas.
ridge opposite effect of 'groove'.
inset Looks like embedded in the canvas.
outset opposite effect of 'inset'.
initial Sets this property to its default value.
inherit takes the computed value of its parent element border-bottom-style property.

The example below shows the border-bottom-style property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <title>Example of CSS border-bottom-style property</title>
  <style type="text/css">
    p {<!--from  ww w  . j av  a 2  s.  c  om-->
        border-bottom-width: 3px;
    }
    p.none {
        border-bottom-style: none;
    }
    p.dotted {
        border-bottom-style: dotted;
    }
    p.dashed {
        border-bottom-style: dashed;
    }
    p.solid {
        border-bottom-style: solid;
    }
    p.double {
        border-bottom-style: double;
    }
    p.groove {
        border-bottom-style: groove;
    }
    p.ridge {
        border-bottom-style: ridge;
    }
    p.inset {
        border-bottom-style: inset;
    }
    p.outset {
        border-bottom-style: outset;
    }
    </style>
 </head>
 <body>
  <h1>Various border style.</h1>
  <p class="none">No bottom border.</p>
  <p class="dotted">A dotted bottom border.</p>
  <p class="dashed">A dashed bottom border.</p>
  <p class="solid">A solid bottom border.</p>
  <p class="double">A double bottom border.</p>
  <p class="groove">A groove bottom border.</p>
  <p class="ridge">A ridge bottom border.</p>
  <p class="inset">An inset bottom border.</p>
  <p class="outset">An outset bottom border.</p>
 </body>
</html>

Related Tutorials