border.css

Github npm unpkg
border-none
border-inset
border-groove
border-outset
border-ridge
border-dotted
border-dashed
border-solid
border-double
border-hidden
border-thin border-none
border-thin border-inset
border-thin border-groove
border-thin border-outset
border-thin border-ridge
border-thin border-dotted
border-thin border-dashed
border-thin border-solid
border-thin border-double
border-thin border-hidden
border-medium border-none
border-medium border-inset
border-medium border-groove
border-medium border-outset
border-medium border-ridge
border-medium border-dotted
border-medium border-dashed
border-medium border-solid
border-medium border-double
border-medium border-hidden
border-thick border-none
border-thick border-inset
border-thick border-groove
border-thick border-outset
border-thick border-ridge
border-thick border-dotted
border-thick border-dashed
border-thick border-solid
border-thick border-double
border-thick border-hidden
Interactive table demo
Style Conveys Use cases
inset
  • editability
  • inputs
groove
  • dimension
  • perspective
outset
  • clickability
  • buttons
ridge
  • dimension
  • windows
dotted
  • focus
  • fun
  • focus state
  • playful tone
dashed
  • intermittence
  • incomplete
  • caution
  • offline status
  • progress
  • warning
solid
  • separation
  • attention
  • current
  • sectioning
  • contrast
  • context
double
  • attention
  • contrast
  • states
Help edit this on Github :)