테두리 ( border-style )
테두리 정의 - solid 속성에 맞는 테두리가 생성됨
.solid1 {
border-style : solid;
}
테두리 섞기 - 위,오른쪽,아래,왼쪽 순서로 작성할 경우 4개의 속성값이 섞여서 나오게 된다 // 정의 하지 않게 되면 반대쪽에서 정의 했던것과 같은것으로 결과가 나옴
.mix2 {
border-style : solid dotted groove dashed;
}
border-style 의 속성
dotted- 점선 테두리
dashed- 짧은 점선
solid- 단색 테두리
double- 이중 테두리
groove- 3D 홈 테두리
ridge- 3D 융기된 테두리
inset- 3D 삽입 테두리
outset- 3D 아웃셋 테두리
none- 경계를 정의하지 않음
hidden- 숨겨진 테두리
테두리의 넓이 ( border-width )
테두리의 넓이 - style의 테두리의 넓이를 4px 로 설정함
p.four {
border-style : solid;
border-width : 4px;
}
방향마다 두께 정하기 - 위,오른쪽,아래,왼쪽 순서로 각각 정의할 수 있음
p.side5 {
border-style : solid;
border-width : 4px 10x 30px 52px;
}
border-width 의 속성
in, px, pt, cm, em, etc : 인치 픽셀등 정의한 단위
thin, medium, thick : 얇음,중간,두꺼움
테두리의 색상 ( border-color )
테두리의 색상 - style에 정의된 테두리의 색을 바꾼다
테두리의 색상은 16진수(#ff3521) , rgb(255, 125 , 32) , HSL(2, 100%, 32%)등으로 지정할 수 있다
p.bdcolor {
border-style : dashed;
border-color : blue;
}
방향마다 색상 정하기 - 위,오른쪽,아래,왼쪽 순서로 각각 정의할 수 있음
p.side5 {
border-style : solid;
border-width : red blue yellow green;
}
테두리 속성의 위치 ( border-top-style )
테두리의 위치 - 테두리가 생성 되었을 때 그 테두리의 4개의 선에 각각 다른 속성을 줄 때
p {
border-top-style : dotted;
border-right-style : solid;
border-bottom-style : dashed;
border-left-style : solid;
}
둥근 테두리 ( border-radius )
둥근 테두리를 지정 - px로 둥근정도를 지정
p.round {
border : solid;
border-radius : 8px
