src/docs/border-color.mdx
import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors"; import dedent from "dedent";
export const title = "border-color"; export const description = "Utilities for controlling the color of an element's borders.";
<ApiTable
rows={[
...[
["border", (value) => border-color: ${value}],
["border-x", (value) => border-inline-color: ${value}],
["border-y", (value) => border-block-color: ${value}],
["border-s", (value) => border-inline-start-color: ${value}],
["border-e", (value) => border-inline-end-color: ${value}],
["border-bs", (value) => border-block-start-color: ${value}],
["border-be", (value) => border-block-end-color: ${value}],
["border-t", (value) => border-top-color: ${value}],
["border-r", (value) => border-right-color: ${value}],
["border-b", (value) => border-bottom-color: ${value}],
["border-l", (value) => border-left-color: ${value}],
["divide", (value) => & > :not(:last-child) {\n border-color: ${value}\n}],
].flatMap(([utility, css]) => [
[${utility}-inherit, css("inherit;")],
[${utility}-current, css("currentColor;")],
[${utility}-transparent, css("transparent;")],
...Object.entries(colors).map(([name, value]) => [
${utility}-${name},
css(var(--color-${name}); /* ${value} */),
]),
[${utility}-(<custom-property>), css("var(<custom-property>);")],
[${utility}-[<value>], css("<value>;")],
]),
]}
/>
Use utilities like border-rose-500 and border-lime-100 to control the border color of an element:
<!-- [!code classes:border-indigo-500,border-purple-500,border-sky-500] -->
<div class="border-4 border-indigo-500 ..."></div>
<div class="border-4 border-purple-500 ..."></div>
<div class="border-4 border-sky-500 ..."></div>
Use the color opacity modifier to control the opacity of an element's border color:
<Figure> <Example> { <div className="grid gap-4 text-center text-sm leading-6 font-bold text-white lg:grid-cols-3"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> border-indigo-500/100 </p> <div className="size-16 border-4 border-indigo-500/100 bg-white p-4 dark:bg-gray-900"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> border-indigo-500/75 </p> <div className="size-16 border-4 border-indigo-500/75 bg-white p-4 dark:bg-gray-900"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> border-indigo-500/50 </p> <div className="size-16 border-4 border-indigo-500/50 bg-white p-4 dark:bg-gray-900"></div> </div> </div> } </Example><!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<div class="border-4 border-indigo-500/100 ..."></div>
<div class="border-4 border-indigo-500/75 ..."></div>
<div class="border-4 border-indigo-500/50 ..."></div>
Use utilities like border-t-indigo-500 and border-r-lime-100 to set the border color for one side of an element:
<!-- [!code classes:border-t-indigo-500,border-r-indigo-500,border-b-indigo-500,border-l-indigo-500] -->
<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>
Use utilities like border-x-indigo-500 and border-y-lime-100 to set the border color on two sides of an element at the same time:
<!-- [!code classes:border-x-indigo-500,border-y-indigo-500] -->
<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div>
<div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>
Use utilities like border-s-indigo-500 and border-e-lime-100 to set the border-inline-start-color and border-inline-end-color logical properties, which map to either the left or right border based on the text direction:
<!-- [!code classes:border-s-indigo-500,border-s-indigo-500] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div dir="ltr">
<div class="border-s-indigo-500 ..."></div>
</div>
<div dir="rtl">
<div class="border-s-indigo-500 ..."></div>
</div>
Use the border-bs-* and border-be-* utilities to set the border-block-start-color and border-block-end-color logical properties, which map to either the top or bottom border based on the writing mode:
<!-- [!code classes:border-bs-indigo-500] -->
<div class="border-bs-indigo-500 ..."></div>
Use utilities like divide-indigo-500 and divide-lime-100 to control the border color between child elements:
<!-- [!code classes:divide-indigo-500] -->
<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
<!-- [!code classes:focus:border-pink-600] -->
<input class="border-2 border-gray-700 focus:border-pink-600 ..." />