border

Summary

엘리먼트에 테두리 너비 사이즈, 색상, 스타일을 지정합니다.

Value

border-width

• thin : 얇은 테두리
• medium : 중간 테두리 [default값]
• thick : 두꺼운 테두리
• 길이 : 테두리의 두께를 지정하는 명시적인 값으로 음수가 될 수 없다.
• inherit

border-style [테두리 스타일 보기 - 보더 사이즈를 조절해보세요]

• solid : 실선
• dashed : 짧은 선들의 패턴으로 이루어짐
• dotted : 점선
• double : 두개의 실선
• groove : 캔버스에서 안으로 조각되어진것처럼 보인다.
• ridge : 캔버스에서 튀어 나와 조각되어진것처럼 보인다. groove의 반대로 보임
• inset : 안쪽으로 입체감이 느껴진다.
• outset : 밖으로 입체감이 느껴지낟. inset의 반대로 보임
• none : 보더를 지정하지 않는다. [default 값]
• hidden : 테두리 숨기기

border-color

• 색상
• transparent

약식 속성

• [ border-width | border-style | border-color ]
• inherit

Tip

1. border-style: hidden 은 가장 높은 우선순위를 가진다.
2. border-style : none 은 가장 낮은 우선순위를 가진다.
3. 얇은 테두리와 넓은 테두리가 겹칠경우 얇은 테두리가 없어진다.
4. 만약 여러개가 같은 border-width를 가지면 double이 가장 우선순위가 높고, 그 다음으로 solid, dashed, dotted, ridge, outset, groove, inset의 순서대로 적용된다. [sample]
5. 보더의 약식 속성은 다음과 같이 사용될 수 있다. 아래 p 엘리먼트의 모양은 모두 같다. [sample]
   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   p { border: 1px solid red; } p { border-top : 1px solid red; border-right : 1px solid red; border-bottom : 1px solid red; border-left : 1px solid red; } p { border-top-width : 1px; border-top-style : solid; border-top-color: red; border-right-width : 1px; border-right-style : solid; border-right-color: red; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color: red; border-left-width : 1px; border-left-style : solid; border-left-color: red; }