Skip to content

Samples by Class: sp-css-borderColor-*

The sp-css-borderColor-* classes apply a border color (still requires a border-width and border-style to display). Several standard, named, theme, neutral, and more are included.

The sp-css-borderColor-* classes apply to all four borders. To apply colors only to specific borders use the sp-css-borderTopColor-*,sp-css-borderLeftColor-*,sp-css-borderBottomColor-*, or sp-css-borderRightColor-* classes also listed below.

Samples are grouped by classes used. Expand to see the related samples.

0 samples

sp-css-borderBottomColor-black

0 samples

sp-css-borderBottomColor-BlackFont

0 samples

sp-css-borderBottomColor-BlackText

0 samples

sp-css-borderBottomColor-blockingBackground

0 samples

sp-css-borderBottomColor-blue

0 samples

sp-css-borderBottomColor-blueDark

0 samples

sp-css-borderBottomColor-blueLight

0 samples

sp-css-borderBottomColor-BlueText

0 samples

sp-css-borderBottomColor-bodyBackground

0 samples

sp-css-borderBottomColor-bodyDivider

0 samples

sp-css-borderBottomColor-bodySubtext

0 samples

sp-css-borderBottomColor-bodyText

0 samples

sp-css-borderBottomColor-BrownText

0 samples

sp-css-borderBottomColor-CoralFont

0 samples

sp-css-borderBottomColor-CornflowerBlueFont

0 samples

sp-css-borderBottomColor-CyanFont

0 samples

sp-css-borderBottomColor-DarkBlueText

0 samples

sp-css-borderBottomColor-DarkGreenText

0 samples

sp-css-borderBottomColor-DarkPurpleText

0 samples

sp-css-borderBottomColor-DarkRedText

0 samples

sp-css-borderBottomColor-disabledBackground

0 samples

sp-css-borderBottomColor-disabledSubtext

0 samples

sp-css-borderBottomColor-disabledText

0 samples

sp-css-borderBottomColor-DustRoseFont

0 samples

sp-css-borderBottomColor-errorBackground

0 samples

sp-css-borderBottomColor-errorText

0 samples

sp-css-borderBottomColor-GoldFont

0 samples

sp-css-borderBottomColor-GrayText

0 samples

sp-css-borderBottomColor-green

0 samples

sp-css-borderBottomColor-greenLight

0 samples

sp-css-borderBottomColor-GreenText

0 samples

sp-css-borderBottomColor-LavenderText

0 samples

sp-css-borderBottomColor-LightBlueFont

0 samples

sp-css-borderBottomColor-LightGrayFont

0 samples

sp-css-borderBottomColor-LightPurpleFont

0 samples

sp-css-borderBottomColor-LightPurpleText

0 samples

sp-css-borderBottomColor-LilacFont

0 samples

sp-css-borderBottomColor-listBackground

0 samples

sp-css-borderBottomColor-listItemBackgroundChecked

0 samples

sp-css-borderBottomColor-listTextColor

0 samples

sp-css-borderBottomColor-MauveFont

0 samples

sp-css-borderBottomColor-MintGreenFont

0 samples

sp-css-borderBottomColor-neutralDark

0 samples

sp-css-borderBottomColor-neutralLight

0 samples

sp-css-borderBottomColor-neutralLighter

0 samples

sp-css-borderBottomColor-neutralLighterAlt

0 samples

sp-css-borderBottomColor-neutralPrimary

0 samples

sp-css-borderBottomColor-neutralPrimaryAlt

0 samples

sp-css-borderBottomColor-neutralQuaternary

0 samples

sp-css-borderBottomColor-neutralQuaternaryAlt

0 samples

sp-css-borderBottomColor-neutralSecondary

0 samples

sp-css-borderBottomColor-neutralTertiary

0 samples

sp-css-borderBottomColor-neutralTertiaryAlt

0 samples

sp-css-borderBottomColor-OrangeText

0 samples

sp-css-borderBottomColor-PeachFont

0 samples

sp-css-borderBottomColor-purple

0 samples

sp-css-borderBottomColor-PurpleText

0 samples

sp-css-borderBottomColor-red

0 samples

sp-css-borderBottomColor-redDark

0 samples

sp-css-borderBottomColor-RedText

0 samples

sp-css-borderBottomColor-SageFont

0 samples

sp-css-borderBottomColor-successBackground

0 samples

sp-css-borderBottomColor-TealText

0 samples

sp-css-borderBottomColor-themeDark

0 samples

sp-css-borderBottomColor-themeDarkAlt

0 samples

sp-css-borderBottomColor-themeDarker

0 samples

sp-css-borderBottomColor-themeLight

0 samples

sp-css-borderBottomColor-themeLighter

0 samples

sp-css-borderBottomColor-themeLighterAlt

0 samples

sp-css-borderBottomColor-themePrimary

0 samples

sp-css-borderBottomColor-themeSecondary

0 samples

sp-css-borderBottomColor-themeTertiary

0 samples

sp-css-borderBottomColor-VioletFont

0 samples

sp-css-borderBottomColor-warningBackground

0 samples

sp-css-borderBottomColor-white

0 samples

sp-css-borderBottomColor-WhiteFont

0 samples

sp-css-borderBottomColor-WhiteText

0 samples

sp-css-borderBottomColor-yellow

0 samples

sp-css-borderBottomColor-yellowLight

0 samples

sp-css-borderColor-black

0 samples

sp-css-borderColor-BlackFont

0 samples

sp-css-borderColor-BlackText

0 samples

sp-css-borderColor-blockingBackground

0 samples

sp-css-borderColor-blue

0 samples

sp-css-borderColor-blueDark

0 samples

sp-css-borderColor-blueLight

0 samples

sp-css-borderColor-BlueText

0 samples

sp-css-borderColor-bodyBackground

0 samples

sp-css-borderColor-bodyDivider

0 samples

sp-css-borderColor-bodySubtext

0 samples

sp-css-borderColor-bodyText

0 samples

sp-css-borderColor-BrownText

0 samples

sp-css-borderColor-CoralFont

0 samples

sp-css-borderColor-CornflowerBlueFont

0 samples

sp-css-borderColor-CyanFont

0 samples

sp-css-borderColor-DarkBlueText

0 samples

sp-css-borderColor-DarkGreenText

0 samples

sp-css-borderColor-DarkPurpleText

0 samples

sp-css-borderColor-DarkRedText

0 samples

sp-css-borderColor-disabledBackground

0 samples

sp-css-borderColor-disabledSubtext

0 samples

sp-css-borderColor-disabledText

0 samples

sp-css-borderColor-DustRoseFont

0 samples

sp-css-borderColor-errorBackground

0 samples

sp-css-borderColor-errorText

0 samples

sp-css-borderColor-GoldFont

0 samples

sp-css-borderColor-GrayText

0 samples

sp-css-borderColor-green

0 samples

sp-css-borderColor-greenLight

0 samples

sp-css-borderColor-GreenText

0 samples

sp-css-borderColor-LavenderText

0 samples

sp-css-borderColor-LightBlueFont

0 samples

sp-css-borderColor-LightGrayFont

0 samples

sp-css-borderColor-LightPurpleFont

0 samples

sp-css-borderColor-LightPurpleText

0 samples

sp-css-borderColor-LilacFont

0 samples

sp-css-borderColor-listBackground

0 samples

sp-css-borderColor-listItemBackgroundChecked

0 samples

sp-css-borderColor-listTextColor

0 samples

sp-css-borderColor-MauveFont

0 samples

sp-css-borderColor-MintGreenFont

0 samples

sp-css-borderColor-neutralDark

0 samples

sp-css-borderColor-neutralLight

0 samples

sp-css-borderColor-neutralLighter

0 samples

sp-css-borderColor-neutralLighterAlt

0 samples

sp-css-borderColor-neutralPrimary

0 samples

sp-css-borderColor-neutralPrimaryAlt

0 samples

sp-css-borderColor-neutralQuaternary

0 samples

sp-css-borderColor-neutralQuaternaryAlt

0 samples

sp-css-borderColor-neutralSecondary

0 samples

sp-css-borderColor-neutralTertiary

0 samples

sp-css-borderColor-neutralTertiaryAlt

0 samples

sp-css-borderColor-OrangeText

0 samples

sp-css-borderColor-PeachFont

0 samples

sp-css-borderColor-purple

0 samples

sp-css-borderColor-PurpleText

0 samples

sp-css-borderColor-red

0 samples

sp-css-borderColor-redDark

0 samples

sp-css-borderColor-RedText

0 samples

sp-css-borderColor-SageFont

0 samples

sp-css-borderColor-successBackground

0 samples

sp-css-borderColor-TealText

0 samples

sp-css-borderColor-themeDark

0 samples

sp-css-borderColor-themeDarkAlt

0 samples

sp-css-borderColor-themeDarker

0 samples

sp-css-borderColor-themeLight

0 samples

sp-css-borderColor-themeLighter

0 samples

sp-css-borderColor-themeLighterAlt

0 samples

sp-css-borderColor-themePrimary

0 samples

sp-css-borderColor-themeSecondary

0 samples

sp-css-borderColor-themeTertiary

0 samples

sp-css-borderColor-VioletFont

0 samples

sp-css-borderColor-warningBackground

0 samples

sp-css-borderColor-white

0 samples

sp-css-borderColor-WhiteFont

0 samples

sp-css-borderColor-WhiteText

0 samples

sp-css-borderColor-yellow

0 samples

sp-css-borderColor-yellowLight

0 samples

sp-css-borderLeftColor-black

0 samples

sp-css-borderLeftColor-BlackFont

0 samples

sp-css-borderLeftColor-BlackText

0 samples

sp-css-borderLeftColor-blockingBackground

0 samples

sp-css-borderLeftColor-blue

0 samples

sp-css-borderLeftColor-blueDark

0 samples

sp-css-borderLeftColor-blueLight

0 samples

sp-css-borderLeftColor-BlueText

0 samples

sp-css-borderLeftColor-bodyBackground

0 samples

sp-css-borderLeftColor-bodyDivider

0 samples

sp-css-borderLeftColor-bodySubtext

0 samples

sp-css-borderLeftColor-bodyText

0 samples

sp-css-borderLeftColor-BrownText

0 samples

sp-css-borderLeftColor-CoralFont

0 samples

sp-css-borderLeftColor-CornflowerBlueFont

0 samples

sp-css-borderLeftColor-CyanFont

0 samples

sp-css-borderLeftColor-DarkBlueText

0 samples

sp-css-borderLeftColor-DarkGreenText

0 samples

sp-css-borderLeftColor-DarkPurpleText

0 samples

sp-css-borderLeftColor-DarkRedText

0 samples

sp-css-borderLeftColor-disabledBackground

0 samples

sp-css-borderLeftColor-disabledSubtext

0 samples

sp-css-borderLeftColor-disabledText

0 samples

sp-css-borderLeftColor-DustRoseFont

0 samples

sp-css-borderLeftColor-errorBackground

0 samples

sp-css-borderLeftColor-errorText

0 samples

sp-css-borderLeftColor-GoldFont

0 samples

sp-css-borderLeftColor-GrayText

0 samples

sp-css-borderLeftColor-green

0 samples

sp-css-borderLeftColor-greenLight

0 samples

sp-css-borderLeftColor-GreenText

0 samples

sp-css-borderLeftColor-LavenderText

0 samples

sp-css-borderLeftColor-LightBlueFont

0 samples

sp-css-borderLeftColor-LightGrayFont

0 samples

sp-css-borderLeftColor-LightPurpleFont

0 samples

sp-css-borderLeftColor-LightPurpleText

0 samples

sp-css-borderLeftColor-LilacFont

0 samples

sp-css-borderLeftColor-listBackground

0 samples

sp-css-borderLeftColor-listItemBackgroundChecked

0 samples

sp-css-borderLeftColor-listTextColor

0 samples

sp-css-borderLeftColor-MauveFont

0 samples

sp-css-borderLeftColor-MintGreenFont

0 samples

sp-css-borderLeftColor-neutralDark

0 samples

sp-css-borderLeftColor-neutralLight

0 samples

sp-css-borderLeftColor-neutralLighter

0 samples

sp-css-borderLeftColor-neutralLighterAlt

0 samples

sp-css-borderLeftColor-neutralPrimary

0 samples

sp-css-borderLeftColor-neutralPrimaryAlt

0 samples

sp-css-borderLeftColor-neutralQuaternary

0 samples

sp-css-borderLeftColor-neutralQuaternaryAlt

0 samples

sp-css-borderLeftColor-neutralSecondary

0 samples

sp-css-borderLeftColor-neutralTertiary

0 samples

sp-css-borderLeftColor-neutralTertiaryAlt

0 samples

sp-css-borderLeftColor-OrangeText

0 samples

sp-css-borderLeftColor-PeachFont

0 samples

sp-css-borderLeftColor-purple

0 samples

sp-css-borderLeftColor-PurpleText

0 samples

sp-css-borderLeftColor-red

0 samples

sp-css-borderLeftColor-redDark

0 samples

sp-css-borderLeftColor-RedText

0 samples

sp-css-borderLeftColor-SageFont

0 samples

sp-css-borderLeftColor-successBackground

0 samples

sp-css-borderLeftColor-TealText

0 samples

sp-css-borderLeftColor-themeDark

0 samples

sp-css-borderLeftColor-themeDarkAlt

0 samples

sp-css-borderLeftColor-themeDarker

0 samples

sp-css-borderLeftColor-themeLight

0 samples

sp-css-borderLeftColor-themeLighter

0 samples

sp-css-borderLeftColor-themeLighterAlt

0 samples

sp-css-borderLeftColor-themePrimary

0 samples

sp-css-borderLeftColor-themeSecondary

0 samples

sp-css-borderLeftColor-themeTertiary

0 samples

sp-css-borderLeftColor-VioletFont

0 samples

sp-css-borderLeftColor-warningBackground

0 samples

sp-css-borderLeftColor-white

0 samples

sp-css-borderLeftColor-WhiteFont

0 samples

sp-css-borderLeftColor-WhiteText

0 samples

sp-css-borderLeftColor-yellow

0 samples

sp-css-borderLeftColor-yellowLight

0 samples

sp-css-borderRightColor-black

0 samples

sp-css-borderRightColor-BlackFont

0 samples

sp-css-borderRightColor-BlackText

0 samples

sp-css-borderRightColor-blockingBackground

0 samples

sp-css-borderRightColor-blue

0 samples

sp-css-borderRightColor-blueDark

0 samples

sp-css-borderRightColor-blueLight

0 samples

sp-css-borderRightColor-BlueText

0 samples

sp-css-borderRightColor-bodyBackground

0 samples

sp-css-borderRightColor-bodyDivider

0 samples

sp-css-borderRightColor-bodySubtext

0 samples

sp-css-borderRightColor-bodyText

0 samples

sp-css-borderRightColor-BrownText

0 samples

sp-css-borderRightColor-CoralFont

0 samples

sp-css-borderRightColor-CornflowerBlueFont

0 samples

sp-css-borderRightColor-CyanFont

0 samples

sp-css-borderRightColor-DarkBlueText

0 samples

sp-css-borderRightColor-DarkGreenText

0 samples

sp-css-borderRightColor-DarkPurpleText

0 samples

sp-css-borderRightColor-DarkRedText

0 samples

sp-css-borderRightColor-disabledBackground

0 samples

sp-css-borderRightColor-disabledSubtext

0 samples

sp-css-borderRightColor-disabledText

0 samples

sp-css-borderRightColor-DustRoseFont

0 samples

sp-css-borderRightColor-errorBackground

0 samples

sp-css-borderRightColor-errorText

0 samples

sp-css-borderRightColor-GoldFont

0 samples

sp-css-borderRightColor-GrayText

0 samples

sp-css-borderRightColor-green

0 samples

sp-css-borderRightColor-greenLight

0 samples

sp-css-borderRightColor-GreenText

0 samples

sp-css-borderRightColor-LavenderText

0 samples

sp-css-borderRightColor-LightBlueFont

0 samples

sp-css-borderRightColor-LightGrayFont

0 samples

sp-css-borderRightColor-LightPurpleFont

0 samples

sp-css-borderRightColor-LightPurpleText

0 samples

sp-css-borderRightColor-LilacFont

0 samples

sp-css-borderRightColor-listBackground

0 samples

sp-css-borderRightColor-listItemBackgroundChecked

0 samples

sp-css-borderRightColor-listTextColor

0 samples

sp-css-borderRightColor-MauveFont

0 samples

sp-css-borderRightColor-MintGreenFont

0 samples

sp-css-borderRightColor-neutralDark

0 samples

sp-css-borderRightColor-neutralLight

0 samples

sp-css-borderRightColor-neutralLighter

0 samples

sp-css-borderRightColor-neutralLighterAlt

0 samples

sp-css-borderRightColor-neutralPrimary

0 samples

sp-css-borderRightColor-neutralPrimaryAlt

0 samples

sp-css-borderRightColor-neutralQuaternary

0 samples

sp-css-borderRightColor-neutralQuaternaryAlt

0 samples

sp-css-borderRightColor-neutralSecondary

0 samples

sp-css-borderRightColor-neutralTertiary

0 samples

sp-css-borderRightColor-neutralTertiaryAlt

0 samples

sp-css-borderRightColor-OrangeText

0 samples

sp-css-borderRightColor-PeachFont

0 samples

sp-css-borderRightColor-purple

0 samples

sp-css-borderRightColor-PurpleText

0 samples

sp-css-borderRightColor-red

0 samples

sp-css-borderRightColor-redDark

0 samples

sp-css-borderRightColor-RedText

0 samples

sp-css-borderRightColor-SageFont

0 samples

sp-css-borderRightColor-successBackground

0 samples

sp-css-borderRightColor-TealText

0 samples

sp-css-borderRightColor-themeDark

0 samples

sp-css-borderRightColor-themeDarkAlt

0 samples

sp-css-borderRightColor-themeDarker

0 samples

sp-css-borderRightColor-themeLight

0 samples

sp-css-borderRightColor-themeLighter

0 samples

sp-css-borderRightColor-themeLighterAlt

0 samples

sp-css-borderRightColor-themePrimary

0 samples

sp-css-borderRightColor-themeSecondary

0 samples

sp-css-borderRightColor-themeTertiary

0 samples

sp-css-borderRightColor-VioletFont

0 samples

sp-css-borderRightColor-warningBackground

0 samples

sp-css-borderRightColor-white

0 samples

sp-css-borderRightColor-WhiteFont

0 samples

sp-css-borderRightColor-WhiteText

0 samples

sp-css-borderRightColor-yellow

0 samples

sp-css-borderRightColor-yellowLight

0 samples

sp-css-borderTopColor-black

0 samples

sp-css-borderTopColor-BlackFont

0 samples

sp-css-borderTopColor-BlackText

0 samples

sp-css-borderTopColor-blockingBackground

0 samples

sp-css-borderTopColor-blue

0 samples

sp-css-borderTopColor-blueDark

0 samples

sp-css-borderTopColor-blueLight

0 samples

sp-css-borderTopColor-BlueText

0 samples

sp-css-borderTopColor-bodyBackground

0 samples

sp-css-borderTopColor-bodyDivider

0 samples

sp-css-borderTopColor-bodySubtext

0 samples

sp-css-borderTopColor-bodyText

0 samples

sp-css-borderTopColor-BrownText

0 samples

sp-css-borderTopColor-CoralFont

0 samples

sp-css-borderTopColor-CornflowerBlueFont

0 samples

sp-css-borderTopColor-CyanFont

0 samples

sp-css-borderTopColor-DarkBlueText

0 samples

sp-css-borderTopColor-DarkGreenText

0 samples

sp-css-borderTopColor-DarkPurpleText

0 samples

sp-css-borderTopColor-DarkRedText

0 samples

sp-css-borderTopColor-disabledBackground

0 samples

sp-css-borderTopColor-disabledSubtext

0 samples

sp-css-borderTopColor-disabledText

0 samples

sp-css-borderTopColor-DustRoseFont

0 samples

sp-css-borderTopColor-errorBackground

0 samples

sp-css-borderTopColor-errorText

0 samples

sp-css-borderTopColor-GoldFont

0 samples

sp-css-borderTopColor-GrayText

0 samples

sp-css-borderTopColor-green

0 samples

sp-css-borderTopColor-greenLight

0 samples

sp-css-borderTopColor-GreenText

0 samples

sp-css-borderTopColor-LavenderText

0 samples

sp-css-borderTopColor-LightBlueFont

0 samples

sp-css-borderTopColor-LightGrayFont

0 samples

sp-css-borderTopColor-LightPurpleFont

0 samples

sp-css-borderTopColor-LightPurpleText

0 samples

sp-css-borderTopColor-LilacFont

0 samples

sp-css-borderTopColor-listBackground

0 samples

sp-css-borderTopColor-listItemBackgroundChecked

0 samples

sp-css-borderTopColor-listTextColor

0 samples

sp-css-borderTopColor-MauveFont

0 samples

sp-css-borderTopColor-MintGreenFont

0 samples

sp-css-borderTopColor-neutralDark

0 samples

sp-css-borderTopColor-neutralLight

0 samples

sp-css-borderTopColor-neutralLighter

0 samples

sp-css-borderTopColor-neutralLighterAlt

0 samples

sp-css-borderTopColor-neutralPrimary

0 samples

sp-css-borderTopColor-neutralPrimaryAlt

0 samples

sp-css-borderTopColor-neutralQuaternary

0 samples

sp-css-borderTopColor-neutralQuaternaryAlt

0 samples

sp-css-borderTopColor-neutralSecondary

0 samples

sp-css-borderTopColor-neutralTertiary

0 samples

sp-css-borderTopColor-neutralTertiaryAlt

0 samples

sp-css-borderTopColor-OrangeText

0 samples

sp-css-borderTopColor-PeachFont

0 samples

sp-css-borderTopColor-purple

0 samples

sp-css-borderTopColor-PurpleText

0 samples

sp-css-borderTopColor-red

0 samples

sp-css-borderTopColor-redDark

0 samples

sp-css-borderTopColor-RedText

0 samples

sp-css-borderTopColor-SageFont

0 samples

sp-css-borderTopColor-successBackground

0 samples

sp-css-borderTopColor-TealText

0 samples

sp-css-borderTopColor-themeDark

0 samples

sp-css-borderTopColor-themeDarkAlt

0 samples

sp-css-borderTopColor-themeDarker

0 samples

sp-css-borderTopColor-themeLight

0 samples

sp-css-borderTopColor-themeLighter

0 samples

sp-css-borderTopColor-themeLighterAlt

0 samples

sp-css-borderTopColor-themePrimary

0 samples

sp-css-borderTopColor-themeSecondary

0 samples

sp-css-borderTopColor-themeTertiary

0 samples

sp-css-borderTopColor-VioletFont

0 samples

sp-css-borderTopColor-warningBackground

0 samples

sp-css-borderTopColor-white

0 samples

sp-css-borderTopColor-WhiteFont

0 samples

sp-css-borderTopColor-WhiteText

0 samples

sp-css-borderTopColor-yellow

0 samples

sp-css-borderTopColor-yellowLight