CSS - border-bottom-style Property

Sets style of bottom border of an element.

Possible Values

  • none − No border. (Equivalent of border-width:0;)

  • solid − Border is a single solid line.

  • dotted − Border is a series of dots.

  • dashed − Border is a series of short lines.

  • double − Border is two solid lines.

  • groove − Border looks as though it is carved into the page.

  • ridge − Border looks the opposite of groove.

  • inset − Border makes the box look like it is embedded in the page.

  • outset − Border makes the box look like it is coming out of the canvas.

  • hidden − Same as none, except in terms of border-conflict resolution for table elements.

Applies to

All the HTML elements.

DOM Syntax

object.style.borderBottomStyle="Any of the values defined above";

Example

Following is the example demonstrates border-bottom-style property:

<html>
   <head>
      <style>
         p {
             border-style: solid;
             border-bottom-style: double;
          }
          h2{
              border-style: groove;
              border-bottom-style: dashed ;
          }
      </style>
   </head>
   <body>
          <h2>Bottom border is ridge</h2>
         <p>Bottom border is double</p>
   </body>
</html>
Advertisements