border 속성

border 속성은 모든 면의 테두리 색상, 종류, 두께를 동시에 설정합니다. border-width, border-style, border-color 속성의 단축 속성입니다. 단축되는 속성들과 달리 4면 모두에 동시에 다른 테두리를 설정할 수는 없고, 모든 면에 동일한 테두리만 설정할 수 있습니다.

구문

선택자 {
	border: 두께 종류 색상;
}

속성 값의 순서는 중요하지 않습니다.

예제

요소에 두께가 1px인 검은색 테두리를 만들어 봅시다:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

같이 보기

왼쪽 테두리를 설정하는 속성 border-left,
오른쪽 테두리를 설정하는 속성 border-right,
윗쪽 테두리를 설정하는 속성 border-top,
아랫쪽 테두리를 설정하는 속성 border-bottom,
요소의 외곽선을 설정하는 속성 outline,
테두리 모서리를 둥글게 만드는 속성 border-radius,