border-width

border-width (테두리 두께)

요소의 테두리 두께를 제어하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

클래스	스타일
`border`	`border-width: 1px;`
`border-<number>`	`border-width: <number>px;`
`border-(length:<custom-property>)`	`border-width: var(<custom-property>);`
`border-[<value>]`	`border-width: <value>;`
`border-x`	`border-inline-width: 1px;`
`border-x-<number>`	`border-inline-width: <number>px;`
`border-x-(length:<custom-property>)`	`border-inline-width: var(<custom-property>);`
`border-x-[<value>]`	`border-inline-width: <value>;`
`border-y`	`border-block-width: 1px;`
`border-y-<number>`	`border-block-width: <number>px;`
`border-y-(length:<custom-property>)`	`border-block-width: var(<custom-property>);`
`border-y-[<value>]`	`border-block-width: <value>;`
`border-s`	`border-inline-start-width: 1px;`
`border-s-<number>`	`border-inline-start-width: <number>px;`
`border-s-(length:<custom-property>)`	`border-inline-start-width: var(<custom-property>);`
`border-s-[<value>]`	`border-inline-start-width: <value>;`
`border-e`	`border-inline-end-width: 1px;`
`border-e-<number>`	`border-inline-end-width: <number>px;`
`border-e-(length:<custom-property>)`	`border-inline-end-width: var(<custom-property>);`
`border-e-[<value>]`	`border-inline-end-width: <value>;`
`border-bs`	`border-block-start-width: 1px;`
`border-bs-<number>`	`border-block-start-width: <number>px;`
`border-bs-(length:<custom-property>)`	`border-block-start-width: var(<custom-property>);`
`border-bs-[<value>]`	`border-block-start-width: <value>;`
`border-be`	`border-block-end-width: 1px;`
`border-be-<number>`	`border-block-end-width: <number>px;`
`border-be-(length:<custom-property>)`	`border-block-end-width: var(<custom-property>);`
`border-be-[<value>]`	`border-block-end-width: <value>;`
`border-t`	`border-top-width: 1px;`
`border-t-<number>`	`border-top-width: <number>px;`
`border-t-(length:<custom-property>)`	`border-top-width: var(<custom-property>);`
`border-t-[<value>]`	`border-top-width: <value>;`
`border-r`	`border-right-width: 1px;`
`border-r-<number>`	`border-right-width: <number>px;`
`border-r-(length:<custom-property>)`	`border-right-width: var(<custom-property>);`
`border-r-[<value>]`	`border-right-width: <value>;`
`border-b`	`border-bottom-width: 1px;`
`border-b-<number>`	`border-bottom-width: <number>px;`
`border-b-(length:<custom-property>)`	`border-bottom-width: var(<custom-property>);`
`border-b-[<value>]`	`border-bottom-width: <value>;`
`border-l`	`border-left-width: 1px;`
`border-l-<number>`	`border-left-width: <number>px;`
`border-l-(length:<custom-property>)`	`border-left-width: var(<custom-property>);`
`border-l-[<value>]`	`border-left-width: <value>;`

또한 divide-* 유틸리티로 자식 요소 사이의 테두리 두께를 설정할 수 있어요.

클래스	스타일
`divide-x`	`& > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: 1px; }`
`divide-x-<number>`	`& > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <number>px; }`
`divide-x-(length:<custom-property>)`	`& > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: var(<custom-property>); }`
`divide-x-[<value>]`	`& > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <value>; }`
`divide-y`	`& > :not(:last-child) { border-top-width: 0px; border-bottom-width: 1px; }`
`divide-y-<number>`	`& > :not(:last-child) { border-top-width: 0px; border-bottom-width: <number>px; }`
`divide-y-(length:<custom-property>)`	`& > :not(:last-child) { border-top-width: 0px; border-bottom-width: var(<custom-property>); }`
`divide-y-[<value>]`	`& > :not(:last-child) { border-top-width: 0px; border-bottom-width: <value>; }`
`divide-x-reverse`	`--tw-divide-x-reverse: 1;`
`divide-y-reverse`	`--tw-divide-y-reverse: 1;`

Examples

Basic example

border-2 이나 border-4 같은 border 이나 border-<number> 유틸리티를 사용해서 요소의 모든 면의 테두리 두께를 설정할 수 있어요.

<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>

Individual sides

border-r 이나 border-t-4 같은 유틸리티를 사용해서 요소 한 면의 테두리 두께를 설정할 수 있어요.

<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>

Horizontal and vertical sides

border-x 나 border-y-4 같은 유틸리티를 사용해서 요소의 두 면의 테두리 두께를 동시에 설정할 수 있어요.

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>

Using logical properties

border-s 나 border-e-4 같은 유틸리티를 사용하면 border-inline-start-width 와 border-inline-end-width 논리 속성을 설정할 수 있는데, 이는 텍스트 방향에 따라 왼쪽이나 오른쪽 테두리에 매핑돼요.

<div dir="ltr">
  <div class="border-s-4 ..."></div>
</div>

<div dir="rtl">
  <div class="border-s-4 ..."></div>
</div>

border-bs-<number> 와 border-be-<number> 유틸리티를 사용하면 border-block-start-width 와 border-block-end-width 논리 속성을 설정할 수 있는데, 이는 쓰기 모드(writing mode)에 따라 위쪽이나 아래쪽 테두리에 매핑돼요.

<div class="border-bs-4 ..."></div>

Between children

divide-x 나 divide-y-4 같은 유틸리티를 사용해서 자식 요소 사이에 테두리를 추가할 수 있어요.

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

Reversing children order

요소들이 역순으로 배치되어 있다면 (예: flex-row-reverse 나 flex-col-reverse 사용), divide-x-reverse 나 divide-y-reverse 유틸리티를 사용해서 각 요소의 올바른 면에 테두리가 추가되도록 해야 해요.

<div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Using a custom value

border-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 테두리 두께를 설정할 수 있어요.

<div class="border-[2vw] ...">
  <!-- ... -->
</div>

CSS 변수라면 border-(length:<custom-property>) 문법을 사용할 수도 있어요.

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

이는 border-[length:var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.

Responsive design

border-width 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="border-2 md:border-t-4 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.