Border

Border utilities provide ready-to-use classes for commonly used border parameters—style, width, and color. In addition to these predefined classes, SCSS mixins are available for applying the same styles in custom classes, allowing flexibility while ensuring design consistency. Border Style Classes Style CSS Class solid .sap-border-style-solid dashed .sap-border-style-dashed dotted .sap-border-style-dotted double .sap-border-style-double hidden .sap-border-style-hidden none .sap-border-style-none Border Width Classes Name CSS Class Value 1 .sap-border-width-1 0.0625rem 2 .sap-border-width-2 0.125rem 3 .sap-border-width-3 0.1875rem 4 .sap-border-width-4 0.25rem element .sap-border-width-element var(--sapElement_BorderWidth) group .sap-border-width-group var(--sapGroup_BorderWidth) content-focus .sap-border-width-content-focus var(--sapContent_FocusWidth) list .sap-border-width-list var(--sapList_BorderWidth) button .sap-border-width-button var(--sapButton_BorderWidth) message .sap-border-width-message var(--sapMessage_BorderWidth) field .sap-border-width-field var(--sapField_BorderWidth) field-invalid .sap-border-width-field-invalid var(--sapField_InvalidBorderWidth) field-warning .sap-border-width-field-warning var(--sapField_WarningBorderWidth) field-success .sap-border-width-field-success var(--sapField_SuccessBorderWidth) field-information .sap-border-width-field-information var(--sapField_InformationBorderWidth) Border Color Classes Name CSS Class Value error.sap-border-color-errorvar(--sapErrorBorderColor) warning.sap-border-color-warningvar(--sapWarningBorderColor) success.sap-border-color-successvar(--sapSuccessBorderColor) information.sap-border-color-informationvar(--sapInformationBorderColor) neutral.sap-border-color-neutralvar(--sapNeutralBorderColor) content-badge.sap-border-color-content-badgevar(--sapContent_BadgeBorderColor) content-foreground.sap-border-color-content-foregroundvar(--sapContent_ForegroundBorderColor) shell.sap-border-color-shellvar(--sapShell_BorderColor) shell-interactive.sap-border-color-shell-interactivevar(--sapShell_InteractiveBorderColor) assistant.sap-border-color-assistantvar(--sapAssistant_BorderColor) button.sap-border-color-buttonvar(--sapButton_BorderColor) field.sap-border-color-fieldvar(--sapField_BorderColor) list.sap-border-color-listvar(--sapList_BorderColor) tile.sap-border-color-tilevar(--sapTile_BorderColor) message-error.sap-border-color-message-errorvar(--sapMessage_ErrorBorderColor) message-warning.sap-border-color-message-warningvar(--sapMessage_WarningBorderColor) message-success.sap-border-color-message-successvar(--sapMessage_SuccessBorderColor) message-information.sap-border-color-message-informationvar(--sapMessage_InformationBorderColor) The classes listed above apply borders on all four sides of an element. Similar variations are available for applying borders to specific directions:

The sap-border helper mixin allows you to specify the width, style, and color of an element's border. This is achieved by providing values to the sap-border parameters: $width, $style, $color, and $pos. The $pos parameter defines where the border will be applied and can be one of the following: **all**: applies borders to all sides (default). **top**: applies the border to the top side (border-block-start). **bottom**: applies the border to the bottom side (border-block-end). **left**: applies the border to the left side (border-inline-start). **right**: applies the border to the right side (border-inline-end). **x**: applies the border to left and right sides (border-inline). **y**: applies the border to top and bottom sides (border-block). **inline**: applies the border to both inline sides (border-inline). **block**: applies the border to both block sides (border-block). **inline-start**: applies the border to the start of the inline axis (border-inline-start). **inline-end**: applies the border to the end of the inline axis (border-inline-end). **block-start**: applies the border to the start of the block axis (border-block-start). **block-end**: applies the border to the end of the block axis (border-block-end).

@include sap-border(0.125rem, solid, #000);

@include sap-border(0.125rem, solid, #000, top);

@include sap-border(0.125rem, solid, #000, block-start);

@include sap-border(0.125rem, solid, #000, bottom);

@include sap-border(0.125rem, solid, #000, block-end);

@include sap-border(0.125rem, solid, #000, left);

@include sap-border(0.125rem, solid, #000, inline-start);

@include sap-border(0.125rem, solid, #000, right);

@include sap-border(0.125rem, solid, #000, inline-end);

@include sap-border(0.125rem, solid, #000, y);

@include sap-border(0.125rem, solid, #000, block);

@include sap-border(0.125rem, solid, #000, x);

@include sap-border(0.125rem, solid, #000, inline);