border-style
border-style (테두리 스타일)
요소의 테두리 스타일을 제어하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.
출처: 문서
본문
ClassStyles
| 클래스 | 스타일 |
|---|---|
border-solid |
border-style: solid; |
border-dashed |
border-style: dashed; |
border-dotted |
border-style: dotted; |
border-double |
border-style: double; |
border-hidden |
border-style: hidden; |
border-none |
border-style: none; |
또한 divide-* 유틸리티로 자식 요소 간의 테두리 스타일도 설정할 수 있어요.
| 클래스 | 스타일 |
|---|---|
divide-solid |
& > :not(:last-child) { border-style: solid; } |
divide-dashed |
& > :not(:last-child) { border-style: dashed; } |
divide-dotted |
& > :not(:last-child) { border-style: dotted; } |
divide-double |
& > :not(:last-child) { border-style: double; } |
divide-hidden |
& > :not(:last-child) { border-style: hidden; } |
divide-none |
& > :not(:last-child) { border-style: none; } |
Examples
Basic example
border-solid 이나 border-dotted 같은 유틸리티를 사용해서 요소의 테두리 스타일을 제어할 수 있어요.
<div class="border-2 border-solid ..."></div>
<div class="border-2 border-dashed ..."></div>
<div class="border-2 border-dotted ..."></div>
<div class="border-4 border-double ..."></div>
Removing a border
border-none 유틸리티를 사용하면 요소에 적용된 기존 테두리를 제거할 수 있어요.
<button class="border-none ...">Save Changes</button>
이는 주로 더 작은 브레이크포인트에서 적용된 테두리 스타일을 제거할 때 사용돼요.
Setting the divider style
divide-dashed 나 divide-dotted 같은 유틸리티를 사용해서 자식 요소 사이의 테두리 스타일을 제어할 수 있어요.
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Responsive design
border-style 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.
<div class="border-solid md:border-dotted ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.