border-style

Introduction

Used to set the styles of all four borders. This property can define the styles for the top, right, bottom, and left borders in order.

Usage Examples

Syntax

border-style: double solid dotted dashed;

Values

  • none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  • Supports 1-4 value syntax (top → right → bottom → left).

Formal Definition

Initial valuesolid
Applies toAll elements
Inheritedno
Animatableno

Formal Syntax

border-style = [ <line-style> ]{1,4}
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Differences from the Web

  • MDN Reference
  • Default value is different (Web default is none).
  • When the value is none or hidden, the border width remains unchanged (Web sets it to 0).
  • Does not support inherit, initial, revert, or unset global values.

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.