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