문서컴포넌트블로그쇼케이스
  1. 테두리
  2. border-color

테두리

border-color

엘리먼트의 테두리 색상을 제어하는 유틸리티입니다.

ClassStyles
border-inherit
border-color: inherit;
border-current
border-color: currentColor;
border-transparent
border-color: transparent;
border-black
border-color: var(--color-black); /* #000 */
border-white
border-color: var(--color-white); /* #fff */
border-red-50
border-color: var(--color-red-50); /* oklch(0.971 0.013 17.38) */
border-red-100
border-color: var(--color-red-100); /* oklch(0.936 0.032 17.717) */
border-red-200
border-color: var(--color-red-200); /* oklch(0.885 0.062 18.334) */
border-red-300
border-color: var(--color-red-300); /* oklch(0.808 0.114 19.571) */
border-red-400
border-color: var(--color-red-400); /* oklch(0.704 0.191 22.216) */

예제

기본 예제

border-rose-500과 border-lime-100 같은 유틸리티를 사용해 엘리먼트의 테두리 색상을 조절할 수 있습니다:

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>

투명도 변경하기

엘리먼트의 테두리 색상 투명도를 조절하려면 색상 투명도 수정자를 사용하세요:

border-indigo-500/100

border-indigo-500/75

border-indigo-500/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>

각 면별 설정

border-t-indigo-500이나 border-r-lime-100 같은 유틸리티를 사용해 엘리먼트의 한 면만 테두리 색상을 지정할 수 있습니다:

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>

수평 및 수직 방향 테두리 설정

border-x-indigo-500과 border-y-lime-100 같은 유틸리티를 사용해 엘리먼트의 두 방향 테두리 색상을 동시에 설정할 수 있습니다.

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>

논리적 속성 사용하기

border-s-indigo-500 및 border-e-lime-100과 같은 유틸리티를 사용하여 border-inline-start-color 및 border-inline-end-color 논리적 속성을 설정할 수 있습니다. 이 속성들은 텍스트 방향에 따라 왼쪽 또는 오른쪽 테두리에 매핑됩니다:

왼쪽에서 오른쪽

오른쪽에서 왼쪽

<div dir="ltr">  <div class="border-s-indigo-500 ..."></div></div><div dir="rtl">  <div class="border-s-indigo-500 ..."></div></div>

자식 요소 사이의 구분선

자식 요소 사이의 테두리 색상을 조절하려면 divide-indigo-500과 divide-lime-100 같은 유틸리티를 사용하세요:

01
02
03
<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">  <div>01</div>  <div>02</div>  <div>03</div></div>

커스텀 값 사용하기

border-[<value>] 구문을 사용하세요 border color를 완전히 커스텀한 값으로 설정하려면:

<div class="border-[#243c5a] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 border-(<custom-property>) 구문을 사용할 수도 있습니다:

<div class="border-(--my-border) ...">  <!-- ... --></div>

이는 border-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

포커스 시 적용하기

border-color가 모음으로 시작하면 "an", 그렇지 않으면 "a"를 붙여 border-color 유틸리티 앞에 focus:*와 같은 변형을 추가하면 해당 상태에서만 유틸리티를 적용할 수 있습니다:

<input class="border-2 border-gray-700 focus:border-pink-600 ..." />

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

반응형 디자인

접두사 a border-color 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="border-blue-500 md:border-green-500 ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스터마이징

--color-* 테마 변수를 사용해 프로젝트에서 color 유틸리티를 커스터마이징할 수 있습니다:

@theme {  --color-regal-blue: #243c5a; }

이제 border-regal-blue 유틸리티를 마크업에서 사용할 수 있습니다:

<div class="border-regal-blue">  <!-- ... --></div>

테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.

On this page

Refactoring UI

From the creators of Tailwind CSS

Make your ideas look awesome, without relying on a designer.

“This is the survival kit I wish I had when I started building apps.”

Derrick Reimer, SavvyCal

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy