CSS border 속성 사용하는 방법

border는 div,table,p 등등 여러 태그들에 테투리를 표시하는 속성이다. 

 

border 속성은 아래와 같다. 

 

1. border

태그의 동서남북 4면에 테두리를 표시한다. 

 

border: width style color; 로 사용한다. (예시: border:1px solid black)

 

속성 설명)

 

- width

속성값	설명
medium	2px 굵기로 표시, 기본설정값
thin	1px 굵기로 표시
thick	5px 굵기로 표시
length	입력된 수치로 굵기를 표시(cm, mm, in, px, pt, pc 단위로 입력)
initial	기본설정값으로 굵기를 표시(medium)

 

- style

속성값	설명
none	기본값, 테두리 표시 안함.
hidden	none과 같음
dotted	점 선으로 테두리 표시
dashed	dash board 형태로 테두리 표시
solid	실선으로 테두리 표시
double	이중 실선으로 테두리 표시
groove	3D grooved 선으로 테두리 표시
ridge	3D ridge 선으로 테두리 표시
inset	3D inset 선으로 테두리 표시
outset	3D outset 선으로 테두리 표시
initial	기본값으로 설정

 

- color

속성값	설명
color	#ffffff, rgb(), rgba(), hsl(), hsla()로 색상표시
transparent	테두리를 투명하게 표시
initial	기본값(검은색)으로 설정

 

 

border: 1px soild black 형식으로 한번에 세가지 속성을 부여할 수도 있고,

 

border-top: 1px solid blue

border-bottom: medium dotted red

border-left: thin dashed green

border-right: thick double rgba(200, 200, 200, 0.8)

 

위와 같이 각각의 테두리 선 속성을 다르게 지정할 수도 있다. 

 

 

2. border-collapse

테이블 안에서 border의 충돌이 일어났을 때 어떻게 표시를 해줄지에 대한 속성을 부여한다. 

 

속성값	설명
separate	테두리를 각각 떨어뜨려 표시한다.
collapse	충돌이 일어난 테두리를 하나로 만든다.
initial	기본값으로 표시한다.(separate)

 

 

3. border-radius

테두리를 곡선형태로 만들 수 있는 속성이며 입력되는 수치에 따라 그 모양이 다르게 표시된다. 

 

속성값	설명
length	수치값을 입력한다.(cm, mm, in, px, pt, pc 단위로 입력)
%	백분율로 표시한다.
initial	기본값으로 표시한다.(직선)

 

 

4. border-image

테두리를 선이 아닌 이미지로 표시하는 속성이다. 

 

속성값	설명
border-image-source	표시할 이미지의 경로를 입력한다.
border-image-slice	테두리 이미지를 어떻게 쪼개어 표시할지 설정한다.
border-image-width	표시할 테두리 이미지의 가로 길이를 설정한다.
border-image-outset	테투리 박스 영역을 확장하여 테두리 이미지를 설정할 때 사용한다.
border-image-repeat	테두리 이미지의 반복 여부를 확인한다.
initial	기본값으로 설정한다.