Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

border-bottom

Introduction

Used to set the styles related to the bottom border. This property allows setting border-bottom-width, border-bottom-style, and border-bottom-color in order.

Usage Examples

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

Syntax

/* Bottom border with thick double red lines */
border-bottom: thick double red;

/* Bottom border with thin dotted blue lines */
border-bottom: thin dotted blue;

/* Bottom border with a 10px dashed orange line */
border-bottom: 10px dashed orange;

Values

Accepts the following value types in order:

Formal Definition

Initial valueEmpty
Applies toAll elements
Inheritedno
Animatableno

Formal Syntax

border-bottom =
  <line-width>  ||
  <line-style>  ||
  <color>

<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Differences from the Web

  • mdn:border-bottom
  • Does not support global values like inherit, initial, revert, and unset

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.