CSS의 border 속성은 요소에 테두리를 정의할 때 사용합니다. 이 속성 하나만으로 테두리의 두께(border-width), 스타일(border-style), 색상(border-color)을 한 번에 지정할 수 있어 표(table)뿐 아니라 모든 HTML 요소에 폭넓게 활용됩니다.
문법(Syntax)
Selector {
border: /*value*/
}border 속성의 값은 일반적으로 테두리 두께, 스타일, 색상 순서로 작성하며, 예를 들어 border: 3px double green;처럼 표현할 수 있습니다.
예제 1: 다양한 테두리 스타일 조합하기
다음 예제는 border 속성과 함께 border-right-style, border-left-width, border-bottom-color 등 개별 하위 속성을 조합하여 표의 각 방향마다 다른 테두리를 적용한 사례입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 1em;
border: 3px double green;
border-right-style: dashed;
border-left-width: 17px;
border-bottom-color: orange;
}
td {
font-size: 24px;
border-right-style: dotted;
border-width: 3px;
border-right-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>demo</td>
<td>text</td>
</tr>
<tr>
<td>goes</td>
<td>here</td>
</tr>
</table>
</body>
</html>출력 결과
위 코드를 실행하면 아래와 같은 결과가 나타납니다.
예제 2: 제목(caption)이 있는 표에 테두리 적용하기
다음 예제는 표 전체에는 점선(dashed) 테두리를, 각 셀(td)에는 실선(solid) 테두리를 적용하고, caption-side 속성으로 표 제목을 하단에 배치한 사례입니다. 또한 colspan 속성이 있는 셀에는 box-shadow를 활용해 안쪽 그림자 효과까지 더했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
caption-side: bottom;
border: 2px dashed black;
}
td {
border: 2px solid midnightblue;
text-align: center;
}
td[colspan] {
box-shadow: inset 0 0 10px lightblue;
text-align: center;
}
caption {
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Ranking</h2>
<table>
<caption>Men's ODI Player Ranking</caption>
<tr>
<th>Player</th>
<th>Rank</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>Rohit Sharma</td>
<td>2</td>
</tr>
<tr>
<td>Babar Azam</td>
<td>3</td>
</tr>
<tr>
<td>Ross Taylor</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Sept2019</td>
</tr>
</table>
</body>
</html>출력 결과
위 코드를 실행하면 아래와 같은 결과가 나타납니다.
정리
CSS border 속성은 border: 두께 스타일 색상; 형태로 한 줄에 작성할 수 있는 단축 속성입니다. 표 전체뿐 아니라 각 셀(td, th)에도 개별적으로 적용할 수 있으며, border-right-style, border-bottom-color처럼 방향별·속성별 하위 속성을 함께 사용하면 더욱 세밀한 디자인이 가능합니다.