CSS / Reference / border-style

border-style은 박스 각 변의 테두리 모양을 정하는 단축 속성입니다. 기본 모양은 none이므로 두께와 색만 지정하면 테두리가 나타나지 않을 수 있습니다. 모양을 하나부터 네 개까지 지정해 변마다 다르게 설정할 수 있습니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.card { border: 2px solid #006c9c; }
.box { border-style: solid dashed dotted double; }

값과 적용 조건은 MDN border-style에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 border-style-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>border-style 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 220px; height: 100px; padding: 12px; border-width: 6px; border-color: #006c9c; }
.target { border-style: solid dashed dotted double; }
.reference { border-style: none; }
</style>
</head>
<body>
<main id="demo">
<h1>border-style 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">변마다 다른 모양</p><div class="target">테두리 비교</div></div><div class="b"><p class="label">none</p><div class="reference">테두리 비교</div></div></section>
</main>
</body>
</html>

첫 박스의 위·오른쪽·아래·왼쪽 테두리를 순서대로 확인하세요. none인 박스는 두께 값이 있어도 테두리가 그려지지 않습니다.

값의 배치 순서

네 값은 위에서 시작해 시계 방향입니다. 두 값은 위아래와 좌우, 세 값은 위·좌우·아래를 나타냅니다. 이는 border-width와 같은 계열의 축약 규칙이므로 모양·두께·색을 따로 지정할 때도 각 변의 값을 함께 확인하세요.

단축 속성의 재설정

뒤에서 border: 1px solid처럼 단축 속성을 지정하면 앞의 border-style 개별 설정이 바뀔 수 있습니다. none과 hidden은 일반 박스에서는 비슷하지만 접힌 표 테두리의 충돌 해결에서 hidden이 다른 테두리를 억제하는 역할을 할 수 있습니다.

접힌 표에서 none과 hidden 비교

다음 전체 문서를 css-reference-10622-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>접힌 표에서 none과 hidden 비교</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
table { border-collapse:collapse;margin-bottom:20px; } td { padding:12px; } .left { border-right:6px solid #006c9c; } .none { border-left:6px none #006c9c; } .hidden { border-left:6px hidden #006c9c; }
  </style>
</head>
<body>
<main>
  <h1>접힌 표에서 none과 hidden 비교</h1>
<p>none</p><table><tr><td class="left">왼쪽</td><td class="none">오른쪽</td></tr></table><p>hidden</p><table><tr><td class="left">왼쪽</td><td class="hidden">오른쪽</td></tr></table>
</main>
</body>
</html>

none 옆에서는 이웃 셀의 solid 경계가 보이지만 hidden은 해당 공유 경계의 다른 스타일도 억제합니다. .hidden만 none으로 바꾸어 두 표가 같은지 보고 hidden으로 복구합니다. 일반 박스의 안 보이는 테두리와 표 경계 충돌의 우선순위를 구분하세요.

테두리와 그림자를 구성 요소에 함께 적용하려면 테두리, 둥근 모서리, 그림자 만들기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 border-width입니다.

적용되지 않거나 예상과 다를 때

• 너비와 색이 맞는데 보이지 않으면 style이 none인지 확인합니다.
• double이 실선처럼 보이면 두께가 충분한지와 화면 확대 비율을 확인합니다.