border-style 프로퍼티

 

 

border-style 프로퍼티

·       테두리 선 스타일을 지정하는 속성

·       border-top-style, border-right-style, border-bottom-style, border-left-style 프로퍼티를 이용하여 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 선 스타일을 지정할 수 있습니다.

·       네 가지 속성값을 한 번에 지정하거나 각각 지정 할 수 있습니다.

·       기본 값이 none 이므로 스타일시트에 테두리 스타일을 따로 지정하지 않으면 테두리가 화면에 표시되지 않습니다

 

{ border-xxxxxx-style: 속성값; }

 

프로퍼티 값	설명
none	·       기본값 "0" ·       테두리 선이 나타나지 않습니다.
hidden	·       외곽선 숨김 ·       none과 같은 결과이지만 table태그에서는 표시됩니다.
solid	·       실선
double	·       이중 실설 ·       두선 사이의 간격이 border-width값이 됩니다.
groove	·       선이 안쪽으로 들어간 느낌 ·       오목 형태 (홈이 파인 듯한 입체감)
ridge	·       선이 밖으로 튀어나온 느낌 ·       볼록한 형태
inset	·       내용이 안으로 들어간 느낌이며 테두리 전체가 오목한 형태로 표시됩니다. ·       border-collapse:separate일 경우 전체박스 테두리가 창에 들어간 것처럼 표시되며 ·       border-collapse:collapse일 경우 groove와 동일하게 표시됩니다.
outset	·       내용이 밖으로 나온 느낌이며 테두리 전체가 볼록한 형태입니다. ·       border-collapse:separate일 경우 전체박스 테두리가 창에서 튀어 나온 것처럼 표시되며 ·       border-collapse:collapse일 경우 ridge와 동일하게 표시됩니다.
dashed	·       긴 점선
dotted	·       짧은 점선