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
- border-style: hidden 은 가장 높은 우선순위를 가진다.
- border-style : none 은 가장 낮은 우선순위를 가진다.
- 얇은 테두리와 넓은 테두리가 겹칠경우 얇은 테두리가 없어진다.
- 만약 여러개가 같은 border-width를 가지면 double이 가장 우선순위가 높고, 그 다음으로 solid, dashed, dotted, ridge, outset, groove, inset의 순서대로 적용된다. [sample]
- 보더의 약식 속성은 다음과 같이 사용될 수 있다. 아래 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엘리먼트가 각각 다른 코드를 사용하고 있지만, 모양은 같습니다.