Skip to main content
🏠CustomizationBorderVersion: Next

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.