border-width

CSS Reference

border-width는 박스 네 변의 테두리 두께를 지정하는 단축 속성입니다. 값을 위·오른쪽·아래·왼쪽 순서로 지정하며, 실제 테두리를 보이게 하려면 border-style도 none이 아닌 값이어야 합니다.

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`border-width`	medium (네 변; none/hidden이면 계산 두께 0)	아니요	모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인

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

.box { border-style: solid; border-width: 2px 6px 10px 14px; }

값 또는 구분	동작과 선택 기준
`2px`	네 변 모두 2px
`2px 6px`	위아래 2px, 좌우 6px
`2px 6px 10px`	위 2px, 좌우 6px, 아래 10px
`thin / medium / thick`	브라우저가 정한 상대 두께 키워드; 고정 px로 단정하지 않음

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

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 border-width-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-width 비교 예제</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; padding: 12px; border-style: solid; border-color: #006c9c; }
.target { border-width: 2px 6px 10px 14px; }
.reference { border-width: 2px; }
</style>
</head>
<body>
<main id="demo">
<h1>border-width 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">2px 6px 10px 14px</p><div class="target">각 변의 두께</div></div><div class="b"><p class="label">2px</p><div class="reference">각 변의 두께</div></div></section>
</main>
</body>
</html>

첫 박스는 왼쪽이 가장 두껍고 위쪽이 가장 얇습니다. 두 번째 박스는 모든 변이 같은 두께입니다.

음수와 백분율은 쓰지 않습니다

테두리 두께에는 허용된 비음수 길이 또는 키워드를 사용합니다. 백분율로 박스 너비의 일부를 지정하는 문법은 아닙니다. style이 none이나 hidden인 변은 지정한 두께와 무관하게 계산된 두께가 0이 될 수 있습니다.

두께 변경과 전체 크기

content-box에서는 테두리가 width 바깥에 더해지므로 두께를 키우면 전체 박스가 커집니다. border-box에서는 지정한 크기 안에 테두리가 들어가 내용 공간이 줄어듭니다. 테두리를 강조하는 hover 효과가 주변 배치를 흔들면 outline이나 그림자처럼 공간 계산이 다른 표현도 검토하세요.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 .target의 border-width만 2px, 2px 6px, 2px 6px 10px, 2px 6px 10px 14px로 바꾸어 위→오른쪽→아래→왼쪽에 대응시킵니다.
border-style:none 상태에서는 Computed 두께가 0인 것도 확인합니다. 실제 hover로 두께를 바꾸면 배치가 밀릴 수 있으므로 같은 목적의 outline/그림자와 비교한 뒤 원래 값으로 복구합니다.

값 수	위	오른쪽	아래	왼쪽
1: 2px	2	2	2	2
2: 2px 6px	2	6	2	6
3: 2px 6px 10px	2	6	10	6
4: 2px 6px 10px 14px	2	6	10	14

표의 숫자 단위는 px입니다. 첫 파일 style 끝에 아래를 추가하고 hover 전후의 외곽을 비교합니다. 다음에는 hover 규칙을 border-width:2px; outline:6px solid #006c9c로 바꾸면 outline은 공간을 늘리지 않습니다. 이후 추가 규칙을 모두 제거합니다.

.target { border-width:2px; }
.target:hover { border-width:8px; }

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

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

변 하나만 다르면 border-top-width 같은 개별 규칙이 우선하는지 확인합니다.
테두리 변경으로 박스가 밀리면 box-sizing과 전체 실제 크기를 함께 확인합니다.

CSS Reference

CSS / Reference / box-sizing

content-box·border-box의 내용과 외곽 너비를 계산합니다. 여백과 테두리보다 작은 지정 너비에서 생기는 최소 크기 예외도 실습합니다.

CSS / Reference / border-spacing

표 셀의 가로·세로 간격을 지정하고 padding과 구분합니다. separate·collapse 및 간격 0의 차이를 같은 표에서 비교합니다.

CSS / Reference / font-size

부모와 루트 글자 크기를 기준으로 em·rem을 계산합니다. 중첩된 상대 크기의 차이와 확대 시 잘림을 확인하는 방법을 제공합니다.

CSS / Reference / text-indent

문단 첫 줄 들여쓰기와 내어쓰기를 만들고 전체 문단 여백과의 차이를 비교합니다. 음수 값, 상속과 좁은 화면에서 필요한 시작 여백을 확인합니다.

CSS / Reference / word-wrap

긴 단어의 긴급 줄바꿈과 최소 내용 너비를 비교합니다. anywhere·break-word의 min-content 차이와 Flex·Grid에서 필요한 최소 크기 조정을 확인합니다.

CSS / Reference / aspect-ratio

선호 가로세로 비율과 이미지의 고유 비율을 구분합니다. auto 조합, 확정 크기, cover·contain의 잘림과 빈 공간을 실행 예제로 비교합니다.

CSS / Reference / white-space

같은 공백·탭·개행을 normal·nowrap·pre·pre-wrap·pre-line·break-spaces로 비교합니다. 보존과 접힘, 자동 줄바꿈 및 내부 스크롤의 차이를 확인합니다.

CSS / Reference / background-origin

배경의 위치·크기 기준을 content·padding·border 영역으로 바꾸어 비교합니다. clip과의 차이 및 백분율 크기 기준을 수치로 확인합니다.

CSS / Reference / list-style-type

목록의 의미를 유지하면서 마커 모양과 번호 표시를 변경합니다. start 속성, 이미지 마커와 단축 속성의 영향까지 예제로 확인합니다.

CSS / Reference / content

가상 요소에 문자열·속성값·장식 도형을 생성하는 방법을 설명합니다. 빈 문자열과 none의 차이를 실습하고 중요한 정보를 HTML에 남기는 기준을 확인합니다.