[CSS] border 속성

[개요]

border 속성은 태그의 테두리를 설정하는 속성으로, background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. width-style-color 의 순서로 사용합니다.

 

border-width

 

테두리의 두꼐로, 주로 px단위를 사용합니다.

 

border-style

 

테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다.

 

border-color

 

테두리의 색상으로, 값은 color 속성의 포맷을 사용합니다.

 

[예시]

[결과]

[방향]

 

테두리의 특정 방향만 따로 설정할 수도 있습니다.

 

• border-top
• border-bottom
• border-left
• border-right

 

border-bottom-color 처럼 방향과 색, 두께, 스타일을 따로 설정할 수도 있습니다.

 

[사용법]

 

#box{
	border: 4px dotted green;
	border-bottom: 5px solid blue;
}

 

[예시]

[결과]