border
요소의 테두리선.border-width 테두리 두께
- 값
thin : 가는 선
medium: 중간 굵기 선
thick : 굵은 선
길이 ex)1px, 5px [두께를 직접 지정. 마이너스 지정 불가능]
- border-top-width[상단], border-right-width[우측], border-bottom-width[하단], border-left-width[좌측]로 각각 지정.
- border-width로 한번에 지정해줄수 있다.
ex) border-width : 1px -> 상,하,좌,우 모두 1px 보더가 생김
border-width : 1px 2px -> 상,하는 1px 선. 좌,우엔 2px 선이 생김
border-width : 1px 2px 3px -> 상단 1px, 좌,우 2px, 하단 3px 선
border-width : 1px 2px 3px 4px -> 상 1px, 우 2px, 하 3px, 좌 4px
border-style 테두리 스타일
- none : 없음
- hidden : 없음. table 요소에서만 border-collapse에 따라 달라짐.
- dotted : 점선
- dashed : 파선
- solid : 실선
- double : 두줄 실선
- groove : 입체선(안쪽으로)
- ridge : 입체선(바깥쪽으로)
- inset : 내용 입체(안쪽으로)
- outset : 내용 입체(바깥쪽으로)
none
dotted
dashed
solid
double
groove
ridge
inset
outset
|
- border-top-style[상단], border-right-style[우측], border-bottom-style[하단], border-left-style[좌측]로 각각 지정.
- border-style로 한번에 지정해줄수 있다.
border-color 테두리 색
- transparent : 투명
- 색 지정 : #ff0000, rgb(241, 241, 241), red 로 지정
- border-top-color [상단], border-right-color [우측], border-bottom-color [하단], border-left-color [좌측]로 각각 지정.
- border-color로 한번에 지정해 줄 수 있다.
border 일괄지정
- 테두리의 스타일, 두께, 색을 한번에 지정해줄수 있다.
ex) .borderstyle { solid 1px #ff0000; }
borderstyle 클래스의 테두리 선이 두께가 1px인 빨간색 실선이 생김.
