테두리
border-style
엘리먼트의 테두리 스타일을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
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-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;
} |
예제
기본 예제
border-solid과 border-dotted 같은 유틸리티를 사용해 엘리먼트의 테두리 스타일을 제어할 수 있습니다.
border-solid
border-dashed
border-dotted
border-double
<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>테두리 제거하기
border-none 유틸리티를 사용하면 엘리먼트의 기존 테두리를 제거할 수 있습니다.
<button class="border-none ...">Save Changes</button>이 기능은 주로 더 작은 브레이크포인트에서 적용된 테두리 스타일을 제거할 때 사용됩니다.
구분선 스타일 설정하기
divide-dashed와 divide-dotted 같은 유틸리티를 사용해 자식 엘리먼트 사이의 테두리 스타일을 조절할 수 있습니다.
01
02
03
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500"> <div>01</div> <div>02</div> <div>03</div></div>반응형 디자인
접두사 a border-style 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="border-solid md:border-dotted ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
