Samples by Class: ms-borderColor-*¶
The ms-borderColor-* classes apply a border color (still requires a border-width and border-style to display). Several standard, shared, theme, neutral, and more are included.
Samples are grouped by classes used. Expand to see the related samples.
Complimentary Classes
These classes compliment the ms-fontColor-* and ms-bgColor-* classes and except where noted below contain equivalent colors.
Warning
The named colors alert, severeWarning, warning, and error do not have ms-borderColor- equivalents despite being present elsewhere
1 sample
ms-borderColor-black¶
0 samples
ms-borderColor-black--hover¶
1 sample
ms-borderColor-blue¶
0 samples
ms-borderColor-blueDark¶
0 samples
ms-borderColor-blueDark--hover¶
0 samples
ms-borderColor-blue--hover¶
1 sample
ms-borderColor-blueLight¶
0 samples
ms-borderColor-blueLight--hover¶
0 samples
ms-borderColor-blueMid¶
0 samples
ms-borderColor-blueMid--hover¶
0 samples
ms-borderColor-communicationPrimary¶
0 samples
ms-borderColor-communicationPrimary--hover¶
0 samples
ms-borderColor-communicationShade10¶
0 samples
ms-borderColor-communicationShade10--hover¶
0 samples
ms-borderColor-communicationShade20¶
0 samples
ms-borderColor-communicationShade20--hover¶
0 samples
ms-borderColor-communicationShade30¶
0 samples
ms-borderColor-communicationShade30--hover¶
0 samples
ms-borderColor-communicationTint10¶
0 samples
ms-borderColor-communicationTint10--hover¶
0 samples
ms-borderColor-communicationTint20¶
0 samples
ms-borderColor-communicationTint20--hover¶
0 samples
ms-borderColor-communicationTint30¶
0 samples
ms-borderColor-communicationTint30--hover¶
0 samples
ms-borderColor-communicationTint40¶
0 samples
ms-borderColor-communicationTint40--hover¶
0 samples
ms-borderColor-contrastBlackDisabled¶
0 samples
ms-borderColor-contrastBlackDisabled--hover¶
0 samples
ms-borderColor-contrastBlackSelected¶
0 samples
ms-borderColor-contrastBlackSelected--hover¶
0 samples
ms-borderColor-contrastWhiteDisabled¶
0 samples
ms-borderColor-contrastWhiteDisabled--hover¶
0 samples
ms-borderColor-contrastWhiteSelected¶
0 samples
ms-borderColor-contrastWhiteSelected--hover¶
0 samples
ms-borderColor-gray10¶
1 sample
ms-borderColor-gray100¶
0 samples
ms-borderColor-gray100--hover¶
0 samples
ms-borderColor-gray10--hover¶
0 samples
ms-borderColor-gray110¶
0 samples
ms-borderColor-gray110--hover¶
0 samples
ms-borderColor-gray120¶
0 samples
ms-borderColor-gray120--hover¶
0 samples
ms-borderColor-gray130¶
0 samples
ms-borderColor-gray130--hover¶
0 samples
ms-borderColor-gray140¶
0 samples
ms-borderColor-gray140--hover¶
0 samples
ms-borderColor-gray150¶
0 samples
ms-borderColor-gray150--hover¶
0 samples
ms-borderColor-gray160¶
0 samples
ms-borderColor-gray160--hover¶
0 samples
ms-borderColor-gray170¶
0 samples
ms-borderColor-gray170--hover¶
0 samples
ms-borderColor-gray180¶
0 samples
ms-borderColor-gray180--hover¶
0 samples
ms-borderColor-gray190¶
0 samples
ms-borderColor-gray190--hover¶
0 samples
ms-borderColor-gray20¶
0 samples
ms-borderColor-gray200¶
0 samples
ms-borderColor-gray200--hover¶
0 samples
ms-borderColor-gray20--hover¶
0 samples
ms-borderColor-gray210¶
0 samples
ms-borderColor-gray210--hover¶
0 samples
ms-borderColor-gray220¶
0 samples
ms-borderColor-gray220--hover¶
0 samples
ms-borderColor-gray30¶
0 samples
ms-borderColor-gray30--hover¶
1 sample
ms-borderColor-gray40¶
0 samples
ms-borderColor-gray40--hover¶
0 samples
ms-borderColor-gray50¶
0 samples
ms-borderColor-gray50--hover¶
0 samples
ms-borderColor-gray60¶
0 samples
ms-borderColor-gray60--hover¶
0 samples
ms-borderColor-gray70¶
0 samples
ms-borderColor-gray70--hover¶
0 samples
ms-borderColor-gray80¶
0 samples
ms-borderColor-gray80--hover¶
0 samples
ms-borderColor-gray90¶
0 samples
ms-borderColor-gray90--hover¶
3 samples
ms-borderColor-green¶
0 samples
ms-borderColor-greenDark¶
0 samples
ms-borderColor-greenDark--hover¶
0 samples
ms-borderColor-green--hover¶
1 sample
ms-borderColor-greenLight¶
0 samples
ms-borderColor-greenLight--hover¶
0 samples
ms-borderColor-magenta¶
0 samples
ms-borderColor-magentaDark¶
0 samples
ms-borderColor-magentaDark--hover¶
0 samples
ms-borderColor-magenta--hover¶
0 samples
ms-borderColor-magentaLight¶
0 samples
ms-borderColor-magentaLight--hover¶
0 samples
ms-borderColor-neutralDark¶
0 samples
ms-borderColor-neutralDark--hover¶
11 samples
ms-borderColor-neutralLight¶
- Document Library Thumbnails
- Elf Progress Board
- Issue Tracker: Planner Cards
- Modern Event Tiles
- Request Sign-off
- Resource Catalog Sample
- Retail Accounts
- Status Header and Footer
- Twitter Timeline
- Video Embed Codes
- Video Gallery
3 samples
ms-borderColor-neutralLighter¶
0 samples
ms-borderColor-neutralLighterAlt¶
0 samples
ms-borderColor-neutralLighterAlt--hover¶
0 samples
ms-borderColor-neutralLighter--hover¶
0 samples
ms-borderColor-neutralLight--hover¶
1 sample
ms-borderColor-neutralPrimary¶
0 samples
ms-borderColor-neutralPrimaryAlt¶
0 samples
ms-borderColor-neutralPrimaryAlt--hover¶
0 samples
ms-borderColor-neutralPrimary--hover¶
1 sample
ms-borderColor-neutralQuaternary¶
0 samples
ms-borderColor-neutralQuaternaryAlt¶
0 samples
ms-borderColor-neutralQuaternaryAlt--hover¶
0 samples
ms-borderColor-neutralQuaternary--hover¶
1 sample
ms-borderColor-neutralSecondary¶
3 samples
ms-borderColor-neutralSecondaryAlt¶
0 samples
ms-borderColor-neutralSecondaryAlt--hover¶
0 samples
ms-borderColor-neutralSecondary--hover¶
0 samples
ms-borderColor-neutralTertiary¶
0 samples
ms-borderColor-neutralTertiaryAlt¶
0 samples
ms-borderColor-neutralTertiaryAlt--hover¶
1 sample
ms-borderColor-neutralTertiary--hover¶
0 samples
ms-borderColor-orange¶
0 samples
ms-borderColor-orange--hover¶
2 samples
ms-borderColor-orangeLight¶
0 samples
ms-borderColor-orangeLighter¶
0 samples
ms-borderColor-orangeLighter--hover¶
0 samples
ms-borderColor-orangeLight--hover¶
0 samples
ms-borderColor-purple¶
0 samples
ms-borderColor-purpleDark¶
0 samples
ms-borderColor-purpleDark--hover¶
0 samples
ms-borderColor-purple--hover¶
0 samples
ms-borderColor-purpleLight¶
0 samples
ms-borderColor-purpleLight--hover¶
0 samples
ms-borderColor-red¶
2 samples
ms-borderColor-redDark¶
0 samples
ms-borderColor-redDark--hover¶
0 samples
ms-borderColor-red--hover¶
0 samples
ms-borderColor-sharedBlue10¶
0 samples
ms-borderColor-sharedBlue10--hover¶
0 samples
ms-borderColor-sharedBlueMagenta10¶
0 samples
ms-borderColor-sharedBlueMagenta10--hover¶
0 samples
ms-borderColor-sharedBlueMagenta20¶
0 samples
ms-borderColor-sharedBlueMagenta20--hover¶
0 samples
ms-borderColor-sharedBlueMagenta30¶
0 samples
ms-borderColor-sharedBlueMagenta30--hover¶
0 samples
ms-borderColor-sharedBlueMagenta40¶
0 samples
ms-borderColor-sharedBlueMagenta40--hover¶
0 samples
ms-borderColor-sharedCyan10¶
0 samples
ms-borderColor-sharedCyan10--hover¶
0 samples
ms-borderColor-sharedCyan20¶
0 samples
ms-borderColor-sharedCyan20--hover¶
0 samples
ms-borderColor-sharedCyan30¶
0 samples
ms-borderColor-sharedCyan30--hover¶
0 samples
ms-borderColor-sharedCyan40¶
0 samples
ms-borderColor-sharedCyan40--hover¶
0 samples
ms-borderColor-sharedCyanBlue10¶
0 samples
ms-borderColor-sharedCyanBlue10--hover¶
1 sample
ms-borderColor-sharedCyanBlue20¶
0 samples
ms-borderColor-sharedCyanBlue20--hover¶
0 samples
ms-borderColor-sharedGray10¶
0 samples
ms-borderColor-sharedGray10--hover¶
1 sample
ms-borderColor-sharedGray20¶
0 samples
ms-borderColor-sharedGray20--hover¶
0 samples
ms-borderColor-sharedGray30¶
0 samples
ms-borderColor-sharedGray30--hover¶
0 samples
ms-borderColor-sharedGray40¶
0 samples
ms-borderColor-sharedGray40--hover¶
0 samples
ms-borderColor-sharedGreen10¶
0 samples
ms-borderColor-sharedGreen10--hover¶
1 sample
ms-borderColor-sharedGreen20¶
0 samples
ms-borderColor-sharedGreen20--hover¶
0 samples
ms-borderColor-sharedGreenCyan10¶
0 samples
ms-borderColor-sharedGreenCyan10--hover¶
0 samples
ms-borderColor-sharedMagenta10¶
0 samples
ms-borderColor-sharedMagenta10--hover¶
0 samples
ms-borderColor-sharedMagenta20¶
0 samples
ms-borderColor-sharedMagenta20--hover¶
0 samples
ms-borderColor-sharedMagentaPink10¶
0 samples
ms-borderColor-sharedMagentaPink10--hover¶
0 samples
ms-borderColor-sharedMagentaPink20¶
0 samples
ms-borderColor-sharedMagentaPink20--hover¶
0 samples
ms-borderColor-sharedOrange10¶
0 samples
ms-borderColor-sharedOrange10--hover¶
0 samples
ms-borderColor-sharedOrange20¶
0 samples
ms-borderColor-sharedOrange20--hover¶
0 samples
ms-borderColor-sharedOrange30¶
0 samples
ms-borderColor-sharedOrange30--hover¶
0 samples
ms-borderColor-sharedOrangeYellow10¶
0 samples
ms-borderColor-sharedOrangeYellow10--hover¶
0 samples
ms-borderColor-sharedOrangeYellow20¶
0 samples
ms-borderColor-sharedOrangeYellow20--hover¶
0 samples
ms-borderColor-sharedPinkRed10¶
0 samples
ms-borderColor-sharedPinkRed10--hover¶
0 samples
ms-borderColor-sharedRed10¶
0 samples
ms-borderColor-sharedRed10--hover¶
1 sample
ms-borderColor-sharedRed20¶
0 samples
ms-borderColor-sharedRed20--hover¶
0 samples
ms-borderColor-sharedRedOrange10¶
0 samples
ms-borderColor-sharedRedOrange10--hover¶
0 samples
ms-borderColor-sharedRedOrange20¶
0 samples
ms-borderColor-sharedRedOrange20--hover¶
0 samples
ms-borderColor-sharedYellow10¶
0 samples
ms-borderColor-sharedYellow10--hover¶
0 samples
ms-borderColor-sharedYellowGreen10¶
0 samples
ms-borderColor-sharedYellowGreen10--hover¶
0 samples
ms-borderColor-teal¶
0 samples
ms-borderColor-tealDark¶
0 samples
ms-borderColor-tealDark--hover¶
0 samples
ms-borderColor-teal--hover¶
0 samples
ms-borderColor-tealLight¶
0 samples
ms-borderColor-tealLight--hover¶
1 sample
ms-borderColor-themeDark¶
0 samples
ms-borderColor-themeDarkAlt¶
0 samples
ms-borderColor-themeDarkAlt--hover¶
0 samples
ms-borderColor-themeDarker¶
0 samples
ms-borderColor-themeDarker--hover¶
0 samples
ms-borderColor-themeDark--hover¶
0 samples
ms-borderColor-themeLight¶
0 samples
ms-borderColor-themeLighter¶
1 sample
ms-borderColor-themeLighterAlt¶
0 samples
ms-borderColor-themeLighterAlt--hover¶
0 samples
ms-borderColor-themeLighter--hover¶
0 samples
ms-borderColor-themeLight--hover¶
7 samples
ms-borderColor-themePrimary¶
- Bulletin Board
- Clipboards
- Compressed Date
- Demote News to Site Page
- Event Itinerary Header
- Page-a-day Calendar
- Testimonials
1 sample
ms-borderColor-themePrimary--hover¶
0 samples
ms-borderColor-themeSecondary¶
0 samples
ms-borderColor-themeSecondary--hover¶
0 samples
ms-borderColor-themeTertiary¶
0 samples
ms-borderColor-themeTertiary--hover¶
1 sample
ms-borderColor-white¶
0 samples
ms-borderColor-white--hover¶
1 sample
ms-borderColor-yellow¶
0 samples
ms-borderColor-yellow--hover¶
0 samples
ms-borderColor-yellowLight¶
0 samples