#border-bottom-style

#Introduction

Sets the style type of the bottom border of an element. Used when you need to specify the bottom border style separately.

#Usage Examples

css-apisrc/border-bottom-style/App.tsx

Preview

#Syntax

border-bottom-style: dashed;

#Values

• none: No border style (border width remains unchanged)
• hidden: Hides the border (equivalent to none, used in table layouts to resolve border conflicts)
• dotted: Dotted border (renders as a solid line)
• dashed: Dashed border (renders as a solid line)
• solid: Solid line
• double: Double line (total width equals border-width value)
• groove: 3D groove effect (depends on border-color)
• ridge: 3D ridge effect (depends on border-color)
• inset: Inset effect (depends on border-color)
• outset: Outset effect (depends on border-color)

#Formal Definition

#Formal Syntax

border-bottom-style = <line-style>
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

#Differences from the Web

• MDN Reference
• Different default value (Web uses none)
• When set to none or hidden, the border width remains unchanged (on the Web, it is set to 0)
• Does not support global values like inherit, initial, revert, and unset

#Compatibility