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.