border-color
En esta página
CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx";
Examples#
Basic example#
Use utilities like border-rose-500 and border-lime-100 to control the border color of an element:
{
border-indigo-500
border-purple-500
border-sky-500
<!-- [!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>
Changing the opacity#
Use the color opacity modifier to control the opacity of an element's border color:
{
border-indigo-500/100
border-indigo-500/75
border-indigo-500/50
<!-- [!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>
Individual sides#
Use utilities like border-t-indigo-500 and border-r-lime-100 to set the border color for one side of an element:
{
border-t-indigo-500
border-r-indigo-500
border-b-indigo-500
border-l-indigo-500
<!-- [!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>
Horizontal and vertical sides#
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:
{
border-x-indigo-500
border-y-indigo-500
<!-- [!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>
Using logical properties#
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:
{
Left-to-right
Right-to-left
<!-- [!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>
Divider between children#
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>
Using a custom value#
Applying on focus#
{ }
<!-- [!code classes:focus:border-pink-600] -->
<input class="border-2 border-gray-700 focus:border-pink-600 ..." />