Border

Utilities for controlling the width, radius and style of an element's borders.

Border width

The size of a Border refers to its thickness.

• Class
  Properties
  Example
• border-medium

  border-width: var(--border-size-medium) !important
• border-none

  border-width: var(--border-size-none) !important
• border-thick

  border-width: var(--border-size-thick) !important
• border-thin

  border-width: var(--border-size-thin) !important
• border-x-medium

  border-left-width: var(--border-size-medium) !important

  border-right-width: var(--border-size-medium) !important
• border-x-none

  border-left-width: var(--border-size-none) !important

  border-right-width: var(--border-size-none) !important
• border-x-thick

  border-left-width: var(--border-size-thick) !important

  border-right-width: var(--border-size-thick) !important
• border-x-thin

  border-left-width: var(--border-size-thin) !important

  border-right-width: var(--border-size-thin) !important
• border-y-medium

  border-top-width: var(--border-size-medium) !important

  border-bottom-width: var(--border-size-medium) !important
• border-y-none

  border-top-width: var(--border-size-none) !important

  border-bottom-width: var(--border-size-none) !important
• border-y-thick

  border-top-width: var(--border-size-thick) !important

  border-bottom-width: var(--border-size-thick) !important
• border-y-thin

  border-top-width: var(--border-size-thin) !important

  border-bottom-width: var(--border-size-thin) !important
• border-b-medium

  border-bottom-width: var(--border-size-medium) !important
• border-b-none

  border-bottom-width: var(--border-size-none) !important
• border-b-thick

  border-bottom-width: var(--border-size-thick) !important
• border-b-thin

  border-bottom-width: var(--border-size-thin) !important
• border-e-medium

  border-inline-end-width: var(--border-size-medium) !important
• border-e-none

  border-inline-end-width: var(--border-size-none) !important
• border-e-thick

  border-inline-end-width: var(--border-size-thick) !important
• border-e-thin

  border-inline-end-width: var(--border-size-thin) !important
• border-l-medium

  border-left-width: var(--border-size-medium) !important
• border-l-none

  border-left-width: var(--border-size-none) !important
• border-l-thick

  border-left-width: var(--border-size-thick) !important
• border-l-thin

  border-left-width: var(--border-size-thin) !important
• border-r-medium

  border-right-width: var(--border-size-medium) !important
• border-r-none

  border-right-width: var(--border-size-none) !important
• border-r-thick

  border-right-width: var(--border-size-thick) !important
• border-r-thin

  border-right-width: var(--border-size-thin) !important
• border-s-medium

  border-inline-start-width: var(--border-size-medium) !important
• border-s-none

  border-inline-start-width: var(--border-size-none) !important
• border-s-thick

  border-inline-start-width: var(--border-size-thick) !important
• border-s-thin

  border-inline-start-width: var(--border-size-thin) !important
• border-t-medium

  border-top-width: var(--border-size-medium) !important
• border-t-none

  border-top-width: var(--border-size-none) !important
• border-t-thick

  border-top-width: var(--border-size-thick) !important
• border-t-thin

  border-top-width: var(--border-size-thin) !important

Border radius

The radius of a Border refers to the roundness of any of its angle.

• Class
  Properties
  Example
• rounded-circle

  border-radius: var(--border-radius-circle) !important
• rounded-full

  border-radius: var(--border-radius-full) !important
• rounded-large

  border-radius: var(--border-radius-large) !important
• rounded-medium

  border-radius: var(--border-radius-medium) !important
• rounded-none

  border-radius: var(--border-radius-none) !important
• rounded-b-circle

  border-bottom-right-radius: var(--border-radius-circle) !important

  border-bottom-left-radius: var(--border-radius-circle) !important
• rounded-b-full

  border-bottom-right-radius: var(--border-radius-full) !important

  border-bottom-left-radius: var(--border-radius-full) !important
• rounded-b-large

  border-bottom-right-radius: var(--border-radius-large) !important

  border-bottom-left-radius: var(--border-radius-large) !important
• rounded-b-medium

  border-bottom-right-radius: var(--border-radius-medium) !important

  border-bottom-left-radius: var(--border-radius-medium) !important
• rounded-b-none

  border-bottom-right-radius: var(--border-radius-none) !important

  border-bottom-left-radius: var(--border-radius-none) !important
• rounded-e-circle

  border-start-end-radius: var(--border-radius-circle) !important

  border-end-end-radius: var(--border-radius-circle) !important
• rounded-e-full

  border-start-end-radius: var(--border-radius-full) !important

  border-end-end-radius: var(--border-radius-full) !important
• rounded-e-large

  border-start-end-radius: var(--border-radius-large) !important

  border-end-end-radius: var(--border-radius-large) !important
• rounded-e-medium

  border-start-end-radius: var(--border-radius-medium) !important

  border-end-end-radius: var(--border-radius-medium) !important
• rounded-e-none

  border-start-end-radius: var(--border-radius-none) !important

  border-end-end-radius: var(--border-radius-none) !important
• rounded-l-circle

  border-top-left-radius: var(--border-radius-circle) !important

  border-bottom-left-radius: var(--border-radius-circle) !important
• rounded-l-full

  border-top-left-radius: var(--border-radius-full) !important

  border-bottom-left-radius: var(--border-radius-full) !important
• rounded-l-large

  border-top-left-radius: var(--border-radius-large) !important

  border-bottom-left-radius: var(--border-radius-large) !important
• rounded-l-medium

  border-top-left-radius: var(--border-radius-medium) !important

  border-bottom-left-radius: var(--border-radius-medium) !important
• rounded-l-none

  border-top-left-radius: var(--border-radius-none) !important

  border-bottom-left-radius: var(--border-radius-none) !important
• rounded-r-circle

  border-top-right-radius: var(--border-radius-circle) !important

  border-bottom-right-radius: var(--border-radius-circle) !important
• rounded-r-full

  border-top-right-radius: var(--border-radius-full) !important

  border-bottom-right-radius: var(--border-radius-full) !important
• rounded-r-large

  border-top-right-radius: var(--border-radius-large) !important

  border-bottom-right-radius: var(--border-radius-large) !important
• rounded-r-medium

  border-top-right-radius: var(--border-radius-medium) !important

  border-bottom-right-radius: var(--border-radius-medium) !important
• rounded-r-none

  border-top-right-radius: var(--border-radius-none) !important

  border-bottom-right-radius: var(--border-radius-none) !important
• rounded-s-circle

  border-start-start-radius: var(--border-radius-circle) !important

  border-end-start-radius: var(--border-radius-circle) !important
• rounded-s-full

  border-start-start-radius: var(--border-radius-full) !important

  border-end-start-radius: var(--border-radius-full) !important
• rounded-s-large

  border-start-start-radius: var(--border-radius-large) !important

  border-end-start-radius: var(--border-radius-large) !important
• rounded-s-medium

  border-start-start-radius: var(--border-radius-medium) !important

  border-end-start-radius: var(--border-radius-medium) !important
• rounded-s-none

  border-start-start-radius: var(--border-radius-none) !important

  border-end-start-radius: var(--border-radius-none) !important
• rounded-t-circle

  border-top-left-radius: var(--border-radius-circle) !important

  border-top-right-radius: var(--border-radius-circle) !important
• rounded-t-full

  border-top-left-radius: var(--border-radius-full) !important

  border-top-right-radius: var(--border-radius-full) !important
• rounded-t-large

  border-top-left-radius: var(--border-radius-large) !important

  border-top-right-radius: var(--border-radius-large) !important
• rounded-t-medium

  border-top-left-radius: var(--border-radius-medium) !important

  border-top-right-radius: var(--border-radius-medium) !important
• rounded-t-none

  border-top-left-radius: var(--border-radius-none) !important

  border-top-right-radius: var(--border-radius-none) !important
• rounded-bl-circle

  border-bottom-left-radius: var(--border-radius-circle) !important
• rounded-bl-full

  border-bottom-left-radius: var(--border-radius-full) !important
• rounded-bl-large

  border-bottom-left-radius: var(--border-radius-large) !important
• rounded-bl-medium

  border-bottom-left-radius: var(--border-radius-medium) !important
• rounded-bl-none

  border-bottom-left-radius: var(--border-radius-none) !important
• rounded-br-circle

  border-bottom-right-radius: var(--border-radius-circle) !important
• rounded-br-full

  border-bottom-right-radius: var(--border-radius-full) !important
• rounded-br-large

  border-bottom-right-radius: var(--border-radius-large) !important
• rounded-br-medium

  border-bottom-right-radius: var(--border-radius-medium) !important
• rounded-br-none

  border-bottom-right-radius: var(--border-radius-none) !important
• rounded-ee-circle

  border-end-end-radius: var(--border-radius-circle) !important
• rounded-ee-full

  border-end-end-radius: var(--border-radius-full) !important
• rounded-ee-large

  border-end-end-radius: var(--border-radius-large) !important
• rounded-ee-medium

  border-end-end-radius: var(--border-radius-medium) !important
• rounded-ee-none

  border-end-end-radius: var(--border-radius-none) !important
• rounded-es-circle

  border-end-start-radius: var(--border-radius-circle) !important
• rounded-es-full

  border-end-start-radius: var(--border-radius-full) !important
• rounded-es-large

  border-end-start-radius: var(--border-radius-large) !important
• rounded-es-medium

  border-end-start-radius: var(--border-radius-medium) !important
• rounded-es-none

  border-end-start-radius: var(--border-radius-none) !important
• rounded-se-circle

  border-start-end-radius: var(--border-radius-circle) !important
• rounded-se-full

  border-start-end-radius: var(--border-radius-full) !important
• rounded-se-large

  border-start-end-radius: var(--border-radius-large) !important
• rounded-se-medium

  border-start-end-radius: var(--border-radius-medium) !important
• rounded-se-none

  border-start-end-radius: var(--border-radius-none) !important
• rounded-ss-circle

  border-start-start-radius: var(--border-radius-circle) !important
• rounded-ss-full

  border-start-start-radius: var(--border-radius-full) !important
• rounded-ss-large

  border-start-start-radius: var(--border-radius-large) !important
• rounded-ss-medium

  border-start-start-radius: var(--border-radius-medium) !important
• rounded-ss-none

  border-start-start-radius: var(--border-radius-none) !important
• rounded-tl-circle

  border-top-left-radius: var(--border-radius-circle) !important
• rounded-tl-full

  border-top-left-radius: var(--border-radius-full) !important
• rounded-tl-large

  border-top-left-radius: var(--border-radius-large) !important
• rounded-tl-medium

  border-top-left-radius: var(--border-radius-medium) !important
• rounded-tl-none

  border-top-left-radius: var(--border-radius-none) !important
• rounded-tr-circle

  border-top-right-radius: var(--border-radius-circle) !important
• rounded-tr-full

  border-top-right-radius: var(--border-radius-full) !important
• rounded-tr-large

  border-top-right-radius: var(--border-radius-large) !important
• rounded-tr-medium

  border-top-right-radius: var(--border-radius-medium) !important
• rounded-tr-none

  border-top-right-radius: var(--border-radius-none) !important

Border style

The style of a Border refers to its appearance. Different border style exist but only the solid style is allowed in Quantum for now.

• Class
  Properties
  Example
• border-solid

  border-style: solid !important
• border-dashed

  border-style: dashed !important
• border-dotted

  border-style: dotted !important
• border-double

  border-style: double !important
• border-hidden

  border-style: hidden !important
• border-none

  border-style: none !important

Border color

See the semantic colors in Quantum Foundations to know which color to apply on a Border.