Border Color
Use or name colors please refer to Colors. Also supports color like #hex, rgb(…), hsl(…).
Overview
The border-color CSS property sets the color of an element’s border.
Colors
Use color please refer to Colors.
b:fade-60b:gray-60b:brown-60b:orange-60b:gold-60b:yellow-60b:grass-60b:green-60b:beryl-60b:teal-60b:cyan-60b:sky-60b:blue-60b:indigo-60b:violet-60b:purple-60b:fuchsia-60b:pink-60b:crimson-60b:red-60Hex
b:#878d9fb:#8d8d8fb:#af836eb:#d5731eb:#c08000b:#ac8a00b:#689c13b:#08a345b:#00a170b:#009f94b:#0099c1b:#0b92eeb:#538ceeb:#7d84e8b:#9e77f5b:#b56cecb:#e04ee5b:#ee52a3b:#ea5b82b:#eb5f63RGB
b:rgb(135,141,159)b:rgb(141,141,143)b:rgb(175,131,110)b:rgb(213,115,30)b:rgb(192,128,0)b:rgb(172,138,0)b:rgb(104,156,19)b:rgb(8,163,69)b:rgb(0,161,112)b:rgb(0,159,148)b:rgb(0,153,193)b:rgb(11,146,238)b:rgb(83,140,238)b:rgb(125,132,232)b:rgb(158,119,245)b:rgb(181,108,236)b:rgb(224,78,229)b:rgb(238,82,163)b:rgb(234,91,130)b:rgb(235,95,99)Applying with functions
<div class="border-color:$(color)">...</div>Master supports native CSS variables and functions, just add var(--key) or use shorthand$(key) for variables.
You can also use calc(expression), env(expression) and other CSS functions if the property supports it.
To learn more, see the Functions documentation.
Conditionally apply
States and selectors
<div class="border-color:blue-60:hover">...</div>Master supports all native CSS selectors, just add :hover, :disabled, chaining, combinators and other CSS selectors as usual.
To learn more, see the Selectors documentation.
Responsive breakpoints
<div class="border-color:blue-60@sm">...</div>Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs, 2xs, xs, sm,md, lg, xl, 2xl, 3xl, 4xl. Arbitrary breakpoints can be specified through comparison operators >, >=, <, <=.
To learn more, see the Breakpoints documentation.
Print format and media queries
<div class="border-color:blue-60@print">...</div>Master supports media types like print, screen, speech, all, and other media queries.
To learn more, see the Media Queries documentation.
Dark mode and color schemes
<div class="border-color:blue-60@dark">...</div>Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.
To learn more, see the Color Schemes documentation.
