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.
- ClassPropertiesExample
- 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.
- ClassPropertiesExample
- 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.
- ClassPropertiesExample
- 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.