This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



Border-bottom-style

In this chapter we will learn how to use the border-bottom-style property.

CSS border-bottom-style property is used to set the style of an element's bottom border.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-bottom-style: solid;
      }
      p {
        border-bottom-style: dotted;
      }
    </style>
  </head>
  <body>
    <p> Example with the border-bottom-style.</p>
    <div>Example with the border-bottom-style.</div>
  </body>
</html>

Property Values

Value Descriptions
none It defines that there won't be border. It is the default value of this property.
hidden It is the same with "none" except in border conflict resolution for table elements.
dotted It defines dotted border.
dashed It defines dashed border.
double It defines double border.
solid It defines solid border.
groove It defines 3D grooved border. Its effect change with the border-color value.
ridge It defines 3D ridged border. Its effect change with the border-color value.
inset It defines 3D inset border. Its effect change with the border-color value.
outset It defines 3D outset border. Its effect change with the border-color value.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.


Prev
Next