border

Summary

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

값	[ <'border-width'> || <'border-style'> || <색상> ] | inherit
기본값	각 속성의 기본값을 참조
적용대상	모든요소
상속	상속안됨
퍼센테이지	사용못함
미디어	Visual

 

 

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]

   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;
   }

Sample

border-style 우선 순위 예제

border의 약식 속성 예제 - p엘리먼트가 각각 다른 코드를 사용하고 있지만, 모양은 같습니다.