CSS_[border(보더) 속성 ]

- 보더(border)의 두께(width) 관련속성

• 속성 : border-top-width, border-right-width, border-bottom-width, border-left-width
• 값 : thin, medium, thick, 길이, inherit
• 기본값 : medium
• 적용대상 : 모든 요소

div{ border-top-width: 4px; border-right-width: 2px; border-bottom-width: 4px; border-left-width: 2px; }
값은 공백문자로 구분하여 복수지정 가능하며 지정하는 값에 따라 적용대상이 달라진다.

• 값이 한 개 : '상하좌우'
• 값이 두 개 : '상하' '좌우'
• 값이 세 개 : '상' '좌우' '하'
• 값이 네 개 : '상' '우' '하' '좌'

div{border-width: 4px;} : div{border-width: 4px 4px;} : div{border-width: 4px 4px 4px;} : div{border-width: 4px 4px 4px 4px;} :

- 보더(border)의 스타일(style) 관련속성

• 속성 : border-top-style, border-right-style, border-bottom-style, border-left-style
• 값 : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
• 기본값 : none
• 적용대상 : 모든 요소

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

값은 공백문자로 구분하여 복수지정 가능하며 지정하는 값에 따라 적용대상이 달라진다.

• 값이 한 개 : '상하좌우'
• 값이 두 개 : '상하' '좌우'
• 값이 세 개 : '상' '좌우' '하'
• 값이 네 개 : '상' '우' '하' '좌'

div{border-style: solid;} : div{border-style: solid dotted;} : div{border-style: solid dotted solid;} : div{border-style: solid dotted solid dotted; : }

보더(border)의 색(color) 관련속성

• 속성 : border-top-color, border-right-color, border-bottom-color, border-left-color
• 값 : 색, transparent, inherit
• 기본값 : 색상 속성의 값
• 적용대상 : 모든 요소

div{ border-top-color: red; border-right-color: green; border-bottom-color: red; border-left-color: green; }
값은 공백문자로 구분하여 복수지정 가능하며 지정하는 값에 따라 적용대상이 달라진다.

• 값이 한 개 : '상하좌우'
• 값이 두 개 : '상하' '좌우'
• 값이 세 개 : '상' '좌우' '하'
• 값이 네 개 : '상' '우' '하' '좌'

div{border-color: red;} : div{border-color: red green;} : div{border-color: red green red;} : div{border-color: red green red green;} :

- 보더(border)의 일괄지정

사방 보더(border)의 두께,스타일,색 속성의 일괄 지정이 가능하며 복수지정도 가능하고 순서를 따지지 않으며 생략 가능하다.
div{ border-top: 4px dotted green; border-right: 2px solid red; border-bottom: 4px dotted green; border-left: 2px solid red; } : : div{border:4px solid green;} :
보더 관련 속성은 값을 상속하지 않으므로 값을 생략한 때에는 기본값을 지정한 것으로 인식한다.
사방에 모든 보더를 지정한 뒤 좌우의 보더를 개별적으로 설정이 가능하다. 하지만 우선순위 규칙이 적용되서 중첩될경우 나중에 지정한 스타일이 덮어쓰여진다.