CSS border-width 속성이란?
CSS의 border-width 속성은 요소 테두리(border)의 두께를 지정하는 데 사용됩니다. 기본값으로 네 면 모두에 동일한 두께를 적용할 수 있으며, border-top-width, border-right-width, border-bottom-width, border-left-width 속성을 사용하면 각 면의 테두리 두께를 개별적으로 설정할 수도 있습니다.
테두리 두께는 픽셀(px), em 등의 단위로 지정하거나 thin, medium, thick 같은 키워드 값을 사용할 수 있습니다.
문법(Syntax)
CSS border-width 속성의 기본 문법은 다음과 같습니다.
Selector {
border-width: /*value*/
}예제 1 – 다양한 테두리 스타일과 두께 조합
다음 예제는 border-width 속성을 활용해 부모·자식 요소의 테두리 두께를 서로 다르게 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
border-bottom-width: 20px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
div {
margin: auto;
height: 100px;
width: 80px;
border-style: double;
border-width: 5px;
}
div > div {
margin-top: 15px;
height: 50px;
width: 50px;
border-style: dashed;
border-color: red;
border-width: thin;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div>demo</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
바깥쪽 div에는 double 스타일의 5px 두께 테두리가 적용되고, 안쪽 div에는 dashed 스타일의 얇은(thin) 빨간색 테두리가 적용된 것을 확인할 수 있습니다.
예제 2 – 텍스트 요소에 테두리 두께 적용하기
이번 예제에서는 단락(p)과 인용(q) 요소에 서로 다른 테두리 두께를 적용해 봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 2%;
border-style: ridge;
border-width: 4px;
border-color: indianred;
}
q {
border-style: solid;
border-width: thin;
text-align: center;
font-style: italic;
}
</style>
</head>
<body>
<p>
Student details are covered here.
</p>
<hr>
<q>Education is the most powerful weapon which you can use to change the world.</q>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
단락에는 ridge 스타일의 4px 두께 테두리가, 인용문에는 solid 스타일의 얇은(thin) 테두리가 각각 적용되어 두 요소의 시각적 차이를 쉽게 비교할 수 있습니다.
정리
border-width 속성은 요소 테두리의 두께를 제어하는 핵심 속성입니다. 반드시 border-style이 함께 지정되어야 테두리가 화면에 표시된다는 점을 기억하세요. 숫자 단위 값과 thin·medium·thick 키워드를 상황에 맞게 활용하면 더욱 세밀한 디자인 구현이 가능합니다.