CSS / Reference / border-width

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

문법과 주요 값

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

값의 적용 범위와 문법은 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이나 그림자처럼 공간 계산이 다른 표현도 검토하세요.

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

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

관련 설정을 함께 조정할 때는 박스 크기의 계산 기준, 테두리를 표시하는 border-style을 참고하세요.