CSS에서 border 속성은 요소에 테두리를 적용할 때 사용하는 대표적인 단축(shorthand) 속성입니다. 이 속성 하나만으로 border-width(테두리 두께), border-style(테두리 스타일), border-color(테두리 색상) 세 가지 개별 속성을 한 줄로 간결하게 지정할 수 있습니다.
문법(Syntax)
CSS border 속성의 기본 문법은 다음과 같습니다.
Selector {
border: /* 값 */
}
값은 일반적으로 두께 스타일 색상 순서로 작성하며, 예를 들어 border: 2px solid orange;처럼 표현합니다.
예제 1: 이미지에 테두리 적용하기
다음 예제는 이미지 요소에 border 속성을 활용해 테두리와 그림자 효과를 함께 적용한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin-top: 14px;
margin-left: 30px;
border: 2px solid orange;
box-shadow: 0 0 12px 1px black;
}
#demo {
border: 4px dotted magenta;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg">
<img id="demo" src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
실행 결과
위 코드를 실행하면 첫 번째 이미지에는 주황색 실선(solid) 테두리가, 두 번째 이미지에는 마젠타색 점선(dotted) 테두리가 각각 적용되어 다음과 같이 나타납니다.
예제 2: 표(table)에 테두리 적용하기
border 속성은 표나 셀(td)에도 동일하게 사용할 수 있습니다. 아래 예제는 표 전체와 각 셀에 서로 다른 스타일의 테두리를 지정한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 1em;
border: 3px dashed green;
}
td {
font-size: 24px;
border: 2px double navy;
}
</style>
</head>
<body>
<table>
<tr>
<td>This</td>
<td>text</td>
</tr>
<tr>
<td>is</td>
<td>demo</td>
</tr>
</table>
</body>
</html>
실행 결과
실행하면 표 외곽에는 초록색 파선(dashed) 테두리가, 각 셀에는 남색 이중선(double) 테두리가 적용되어 다음과 같이 표시됩니다.
정리
border 단축 속성을 사용하면 두께, 스타일, 색상을 별도의 선언 없이 한 번에 처리할 수 있어 코드가 훨씬 간결해집니다. 참고로 세 값 중 border-style만 반드시 지정해야 하며, 두께와 색상을 생략하면 기본값(medium, 현재 글자색)이 자동으로 적용됩니다.