border-style
요소의 테두리 선 모양을 설정합니다. border-width와 border-color를 아무리 지정해도 border-style이 없으면 테두리는 렌더링되지 않습니다. border-style은 테두리를 화면에 나타나게 하는 필수 요소입니다.
클래스 목록
border-style은 네 방향 테두리에 한 번에 적용됩니다. 테두리를 보이게 하려면 border-width와 border-color를 함께 지정하세요.
| 클래스 | CSS | 설명 |
|---|---|---|
bss | border-style: solid | 실선 테두리. 가장 일반적인 기본 테두리 |
bsd | border-style: dashed | 파선(대시) 테두리. 임시·점선 영역 표현 |
bsdt | border-style: dotted | 점선 테두리. 가장 가벼운 구분 표현 |
bsdb | border-style: double | 이중 실선 테두리. 두께 3px 이상부터 갈라져 보임 |
bsh | border-style: hidden | 테두리를 그리지 않되 표 병합 시 충돌에서 이김 |
bsnone | border-style: none | 테두리 없음. 표 병합 시 충돌에서 짐 |
시각적 비교
각 값을 동일한 두께(bw3px)와 색(bcA1A1AA)으로 그려 비교합니다. 굵기가 얇으면 dashed와 dotted, solid와 double의 차이가 잘 드러나지 않으니 3px 이상에서 확인하는 것이 좋습니다.
solid — bss
dashed — bsd
dotted — bsdt
double — bsdb
hidden — bsh
none — bsnone
사용 패턴
| 패턴 | 클래스 | 설명 |
|---|---|---|
| 카드 기본 테두리 | bss bw1px bc27272A | bss와 bw1px, bc로 얇은 실선 카드 테두리를 만듭니다. |
| 파일 업로드 드롭존 | bsd bw2px bc6366F1 | bsd로 파선 테두리를 주면 놓을 수 있는 영역이라는 의미가 시각적으로 전달됩니다. |
| 포커스 시 실선 강조 | bss bw2px focus-bc6366F1 | 평소 bsnone이었다가 포커스 상태에서 bss로 바뀌면 레이아웃이 밀립니다. 항상 bss를 유지하고 색만 바꾸세요. |
| 표 셀 테두리 숨김 | bsh | border-collapse 표에서 특정 셀 테두리를 확실히 없애려면 bsnone이 아니라 bsh를 사용합니다. |
| 버튼 테두리 제거 | bsnone | bsnone은 두께와 색이 남아 있어도 테두리를 그리지 않습니다. |
<!-- Card: solid + width + color -->
<div class="bss bw1px bc27272A br8px p2rem bg18181B cFAFAFA">
Card with a solid border
</div>
<!-- Dropzone: dashed -->
<div class="bsd bw2px bc6366F1 br8px p3-2rem tac cA1A1AA">
Drop files here
</div>
<!-- Keep the style, change only the color on focus -->
<input class="bss bw2px bc27272A focus-bc6366F1 py8px px16px br8px bg18181B cFAFAFA" placeholder="No layout shift" />개별 클래스 상세
bssborder-style: solid
가장 많이 쓰는 값입니다. 카드, 인풋, 버튼, 구분선 등 대부분의 UI 테두리가 solid입니다. 두께가 커져도 선 하나로 유지됩니다.
<!-- Standard card border -->
<div class="bss bw1px bc27272A br8px p2rem bg18181B cFAFAFA">
border-style: solid
</div>
<!-- Emphasis border -->
<div class="bss bw3px bc6366F1 br8px p2rem cFAFAFA">
3px solid accent
</div>bsdborder-style: dashed
선이 일정 간격으로 끊긴 파선입니다. 대시의 길이와 간격은 브라우저가 두께에 비례해 정하므로 정확한 제어는 불가능합니다. 드롭존, 임시 영역, 미완성 상태 표현에 적합합니다.
<!-- Upload dropzone -->
<div class="bsd bw2px bc6366F1 br8px p3-2rem tac cA1A1AA">
Drag and drop a file
</div>
<!-- Empty state placeholder -->
<div class="bsd bw1px bc27272A br8px p2rem tac c71717A">
No items yet
</div>bsdtborder-style: dotted
동그란 점이 반복되는 점선입니다. 파선보다 시각적 무게가 가벼워 보조 구분선에 적합합니다. 두께가 얇으면 solid와 구분이 어려우니 2px 이상을 권장합니다.
<!-- Lightweight divider box -->
<div class="bsdt bw2px bc27272A br4px p2rem cA1A1AA">
border-style: dotted
</div>
<!-- Dotted underline only -->
<div class="bbw2px bsdt bcA1A1AA pb4px cFAFAFA">
Dotted underline
</div>bsdbborder-style: double
두 줄의 실선과 그 사이 여백으로 그려집니다. 전체 두께를 3등분해 배분하므로 두께가 3px 미만이면 solid와 구분되지 않습니다. 이중선 효과를 원하면 bw3px 이상을 함께 지정하세요.
<!-- Double line needs 3px or more -->
<div class="bsdb bw6px bc6366F1 p2rem cFAFAFA">
border-style: double
</div>
<!-- Below 3px it looks like solid -->
<div class="bsdb bw2px bcA1A1AA p2rem cA1A1AA">
Looks solid at 2px
</div>bshborder-style: hidden
테두리를 그리지 않는다는 점은 none과 같지만, border-collapse가 collapse인 표에서 인접 셀과 테두리가 충돌하면 hidden이 이깁니다. 즉 이웃 셀이 테두리를 그려도 그 선이 사라집니다.
<!-- Collapsed table: hidden wins the conflict -->
<table class="bcc w100p">
<tr>
<td class="bss bw1px bcA1A1AA p12px cFAFAFA">A</td>
<td class="bsh p12px cFAFAFA">B (edges erased)</td>
<td class="bss bw1px bcA1A1AA p12px cFAFAFA">C</td>
</tr>
</table>bsnoneborder-style: none
테두리를 그리지 않는 기본값입니다. 두께가 지정돼 있어도 렌더링되지 않으며 차지하는 공간도 0이 됩니다. border-collapse 표에서는 충돌 시 우선순위가 가장 낮아 이웃 셀 테두리가 그대로 보입니다.
<!-- Remove a button border -->
<button class="bsnone py8px px16px br8px bg6366F1 cFFFFFF cp">
No border
</button>
<!-- Width and color remain but nothing is drawn -->
<div class="bsnone bw3px bc6366F1 p2rem cA1A1AA">
Nothing is rendered
</div>hidden vs none 비교
동일한 표에 각각을 적용했을 때의 차이입니다.
| bsh (hidden) | bsnone (none) | |
|---|---|---|
| 일반 요소 | 테두리 안 보임 | 테두리 안 보임 (동일) |
| border-collapse 표 | 이웃 셀 테두리도 사라짐 | 이웃 셀 테두리가 그대로 보임 |
| 충돌 우선순위 | 가장 높음 (항상 이김) | 가장 낮음 (항상 짐) |
| 주요 용도 | 표에서 경계선을 확실히 제거 | 일반 요소의 테두리 해제 |
<table class="bcc w100p">
<tr>
<!-- hidden: this cell erases the shared edges -->
<td class="bsh p12px cFAFAFA">hidden</td>
<td class="bss bw1px bcA1A1AA p12px cFAFAFA">neighbour</td>
</tr>
<tr>
<!-- none: the neighbour border still shows -->
<td class="bsnone p12px cFAFAFA">none</td>
<td class="bss bw1px bcA1A1AA p12px cFAFAFA">neighbour</td>
</tr>
</table>팁 & 주의사항
style이 없으면 테두리는 보이지 않는다
border-style의 초기값은 none입니다. 따라서 두께와 색만 지정한 요소는 아무것도 그리지 않습니다. 테두리를 보이게 하려면 style, width, color 세 가지가 모두 필요합니다.
hidden과 none은 무엇이 다른가
일반 요소에서는 결과가 같습니다. 차이는 border-collapse: collapse 표에서 드러납니다. 인접한 두 셀이 서로 다른 테두리를 선언하면 브라우저가 하나를 골라야 하는데, 이때 우선순위는 hidden이 가장 높고 none이 가장 낮습니다. 어떤 셀에 hidden을 주면 이웃이 무슨 테두리를 선언했든 그 경계는 그려지지 않습니다. 반대로 none을 주면 이웃 셀의 테두리가 그대로 보입니다. 표에서 특정 경계선만 확실히 지우고 싶다면 bsnone이 아니라 bsh를 쓰세요.
bw · bc와 함께 쓰기
border-style은 선의 모양만 정합니다. 두께는 bw 계열, 색은 bc 계열이 담당하며 세 클래스를 조합해 테두리를 완성합니다. 색을 생략하면 텍스트 색(currentColor)이 사용됩니다.
두께에 따른 착시
1px에서는 dashed와 dotted, solid와 double의 차이가 거의 보이지 않습니다. 값을 의도적으로 구분해 보여주려면 2~3px 이상을 사용하세요.
네 방향 일괄 적용 — 이 클래스들은 네 방향 테두리 스타일을 한 번에 지정합니다. 방향별로 다른 선 모양이 필요하면 방향 shorthand 클래스를 사용하세요.