Border Utilities

The border utilities provide a set of classes to adjust the border-width, border-color, and border-style properties of elements.

`.bordered`

Applies the default border styling to an element.

css

  .bordered {
    border-width: var(--graupl-border-width);
    border-radius: var(--graupl-border-radius);
    border-style: var(--graupl-border-style);
  }

Border widths

Class Name	Property	Value
`.border-thick`	`border-width`	`thick`
`.border-thin`	`border-width`	`thin`
`.border-medium`	`border-width`	`medium`

`.border-thick`

Sets the border-width property to thick.

`.border-thin`

Sets the border-width property to thin.

`.border-medium`

Sets the border-width property to medium.

Border colors

Class Name	Property	Value
`.border-primary-100`	`border-color`	`var(--graupl-theme-active--primary--100)`
`.border-primary-200`	`border-color`	`var(--graupl-theme-active--primary--200)`
`.border-primary-300`	`border-color`	`var(--graupl-theme-active--primary--300)`
`.border-primary-400`	`border-color`	`var(--graupl-theme-active--primary--400)`
`.border-primary-500`	`border-color`	`var(--graupl-theme-active--primary--500)`
`.border-primary-600`	`border-color`	`var(--graupl-theme-active--primary--600)`
`.border-primary-700`	`border-color`	`var(--graupl-theme-active--primary--700)`
`.border-primary-800`	`border-color`	`var(--graupl-theme-active--primary--800)`
`.border-primary-900`	`border-color`	`var(--graupl-theme-active--primary--900)`
`.border-secondary-100`	`border-color`	`var(--graupl-theme-active--secondary--100)`
`.border-secondary-200`	`border-color`	`var(--graupl-theme-active--secondary--200)`
`.border-secondary-300`	`border-color`	`var(--graupl-theme-active--secondary--300)`
`.border-secondary-400`	`border-color`	`var(--graupl-theme-active--secondary--400)`
`.border-secondary-500`	`border-color`	`var(--graupl-theme-active--secondary--500)`
`.border-secondary-600`	`border-color`	`var(--graupl-theme-active--secondary--600)`
`.border-secondary-700`	`border-color`	`var(--graupl-theme-active--secondary--700)`
`.border-secondary-800`	`border-color`	`var(--graupl-theme-active--secondary--800)`
`.border-secondary-900`	`border-color`	`var(--graupl-theme-active--secondary--900)`
`.border-tertiary-100`	`border-color`	`var(--graupl-theme-active--tertiary--100)`
`.border-tertiary-200`	`border-color`	`var(--graupl-theme-active--tertiary--200)`
`.border-tertiary-300`	`border-color`	`var(--graupl-theme-active--tertiary--300)`
`.border-tertiary-400`	`border-color`	`var(--graupl-theme-active--tertiary--400)`
`.border-tertiary-500`	`border-color`	`var(--graupl-theme-active--tertiary--500)`
`.border-tertiary-600`	`border-color`	`var(--graupl-theme-active--tertiary--600)`
`.border-tertiary-700`	`border-color`	`var(--graupl-theme-active--tertiary--700)`
`.border-tertiary-800`	`border-color`	`var(--graupl-theme-active--tertiary--800)`
`.border-tertiary-900`	`border-color`	`var(--graupl-theme-active--tertiary--900)`
`.border-transparent`	`border-color`	`transparent`

`.border-primary-100`

Sets the border-color property to var(--graupl-theme-active--primary--100).

`.border-primary-200`

Sets the border-color property to var(--graupl-theme-active--primary--200).

`.border-primary-300`

Sets the border-color property to var(--graupl-theme-active--primary--300).

`.border-primary-400`

Sets the border-color property to var(--graupl-theme-active--primary--400).

`.border-primary-500`

Sets the border-color property to var(--graupl-theme-active--primary--500).

`.border-primary-600`

Sets the border-color property to var(--graupl-theme-active--primary--600).

`.border-primary-700`

Sets the border-color property to var(--graupl-theme-active--primary--700).

`.border-primary-800`

Sets the border-color property to var(--graupl-theme-active--primary--800).

`.border-primary-900`

Sets the border-color property to var(--graupl-theme-active--primary--900).

`.border-secondary-100`

Sets the border-color property to var(--graupl-theme-active--secondary--100).

`.border-secondary-200`

Sets the border-color property to var(--graupl-theme-active--secondary--200).

`.border-secondary-300`

Sets the border-color property to var(--graupl-theme-active--secondary--300).

`.border-secondary-400`

Sets the border-color property to var(--graupl-theme-active--secondary--400).

`.border-secondary-500`

Sets the border-color property to var(--graupl-theme-active--secondary--500).

`.border-secondary-600`

Sets the border-color property to var(--graupl-theme-active--secondary--600).

`.border-secondary-700`

Sets the border-color property to var(--graupl-theme-active--secondary--700).

`.border-secondary-800`

Sets the border-color property to var(--graupl-theme-active--secondary--800).

`.border-secondary-900`

Sets the border-color property to var(--graupl-theme-active--secondary--900).

`.border-tertiary-100`

Sets the border-color property to var(--graupl-theme-active--tertiary--100).

`.border-tertiary-200`

Sets the border-color property to var(--graupl-theme-active--tertiary--200).

`.border-tertiary-300`

Sets the border-color property to var(--graupl-theme-active--tertiary--300).

`.border-tertiary-400`

Sets the border-color property to var(--graupl-theme-active--tertiary--400).

`.border-tertiary-500`

Sets the border-color property to var(--graupl-theme-active--tertiary--500).

`.border-tertiary-600`

Sets the border-color property to var(--graupl-theme-active--tertiary--600).

`.border-tertiary-700`

Sets the border-color property to var(--graupl-theme-active--tertiary--700).

`.border-tertiary-800`

Sets the border-color property to var(--graupl-theme-active--tertiary--800).

`.border-tertiary-900`

Sets the border-color property to var(--graupl-theme-active--tertiary--900).

`.border-transparent`

Sets the border-color property to transparent.

Border styles

Class Name	Property	Value
`.border-solid`	`border-style`	`solid`
`.border-dashed`	`border-style`	`dashed`
`.border-dotted`	`border-style`	`dotted`
`.border-double`	`border-style`	`double`
`.border-groove`	`border-style`	`groove`
`.border-ridge`	`border-style`	`ridge`
`.border-inset`	`border-style`	`inset`
`.border-outset`	`border-style`	`outset`
`.border-none`	`border-style`	`none`

`.border-solid`

Sets the border-style property to solid.

`.border-dashed`

Sets the border-style property to dashed.

`.border-dotted`

Sets the border-style property to dotted.

`.border-double`

Sets the border-style property to double.

`.border-groove`

Sets the border-style property to groove.

`.border-ridge`

Sets the border-style property to ridge.

`.border-inset`

Sets the border-style property to inset.

`.border-outset`

Sets the border-style property to outset.

`.border-none`

Sets the border-style property to none.

Customization

To customize the border utilities, you can use the following variables.

Variable	Default Value	Description
`$selector-base`	`"."`	The base selector for the utility classes.
`$use-important`	`true`	A flag to determine if the `!important` flag should be added to the utility classes.
`$generate-base-utilities`	`true`	A flag to determine if the base utility classes should be generated.
`$screen-aware`	`false`	A flag to generate screen-aware utility classes.
`$theme-aware`	`false`	A flag to generate theme-aware utility classes.
`$state-aware`	`false`	A flag to generate state-aware utility classes.
`$container-aware`	`false`	A flag to generate container-aware utility classes.
`$screen-aware-separator`	`":"`	The separator for screen-aware utility classes.
`$theme-aware-separator`	`":"`	The separator for theme-aware utility classes.
`$state-aware-separator`	`":"`	The separator for state-aware utility classes.
`$container-aware-separator`	`":"`	The separator for container-aware utility classes.
`$screen-aware-selector-prefix`	`""`	The prefix for the screen-aware utility classes.
`$theme-aware-selector-prefix`	`""`	The prefix for the theme-aware utility classes.
`$state-aware-selector-prefix`	`""`	The prefix for the state-aware utility classes.
`$container-aware-selector-prefix`	`"cq:"`	The prefix for the container-aware utility classes.
`$default-border-selector`	`"bordered"`	The selector for the default border utility class.
`$border-width-selector-prefix`	`"border-"`	The prefix for the border width utility classes.
`$custom-border-width-properties`	`()`	[DEPRECATED] The custom properties and values for the border width utility classes.
`$border-color-selector-prefix`	`"border-"`	The prefix for the border color utility classes.
`$custom-border-color-properties`	`()`	[DEPRECATED] The custom properties and values for the border color utility classes.
`$border-style-selector-prefix`	`"border-"`	The prefix for the border style utility classes.
`$custom-border-style-properties`	`()`	[DEPRECATED] The custom properties and values for the border style utility classes.

Responsive variants

To generate responsive border utilities, you can set the $screen-aware, $theme-aware, $state-aware, or $container-aware variables to true.

By default, no responsive alignment utilities are generated.

✏️ Note

For more information on responsive variants, refer to the Responsive utility classes documentation.

Border Utilities ​

.bordered ​

Border widths ​

.border-thick ​

.border-thin ​

.border-medium ​

Border colors ​

.border-primary-100 ​

.border-primary-200 ​

.border-primary-300 ​

.border-primary-400 ​

.border-primary-500 ​

.border-primary-600 ​

.border-primary-700 ​

.border-primary-800 ​

.border-primary-900 ​

.border-secondary-100 ​

.border-secondary-200 ​

.border-secondary-300 ​

.border-secondary-400 ​

.border-secondary-500 ​

.border-secondary-600 ​

.border-secondary-700 ​

.border-secondary-800 ​

.border-secondary-900 ​

.border-tertiary-100 ​

.border-tertiary-200 ​

.border-tertiary-300 ​

.border-tertiary-400 ​

.border-tertiary-500 ​

.border-tertiary-600 ​

.border-tertiary-700 ​

.border-tertiary-800 ​

.border-tertiary-900 ​

.border-transparent ​

Border styles ​

.border-solid ​

.border-dashed ​

.border-dotted ​

.border-double ​

.border-groove ​

.border-ridge ​

.border-inset ​

.border-outset ​

.border-none ​

Customization ​

Responsive variants ​