In this section, we will learn what the border-bottom-style property is and how to use it in CSS.
Click here to run the example of border-bottom-style property.
CSS border-bottom-style Property Definition and Usage
The border-bottom-style is a CSS property we use to style the bottom border of an element.
CSS border-bottom-style Property Syntax
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
CSS border-bottom-style Property Value
These are the values that we can use for the `border-bottom-style` property:
- none (The default value);
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Also, the two global values “initial” and “inherit” could be used for this property.
Example: border-bottom-style property in CSS
See the Pen border-bottom-style property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-bottom-style Property Work?
In this example, we’ve used the border-bottom-style to change the style of the bottom border of the element and set it to dashed style.
