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

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엘리먼트가 각각 다른 코드를 사용하고 있지만, 모양은 같습니다.

Summary

Value

Tip

Sample

댓글