border

요소의 '테두리 선'을 지정

 

 

속성 값

값	의미	기본값
border-width	선의 두께(너비)	medium
border-style	선의 종류	none
border-color	선의 색상	black

 

border-width

선의 두께(너비)를 지정

값	의미	기본값
medium	중간 두께	medium
thin	얇은 두께
thick	두꺼운 두께
단위	px, em, cm등 단위로 지정

 

 

사용법

border-width : 위 우 아래 좌;
border-width : 위 [좌, 우] 아래;
border-width : [위, 아래] [좌,우];
border-width : [위, 아래, 좌, 우];

.box{
    border-width: 10px 20px 30px 40px;
    border-width: 10px 20px 40px;
    border-width: 10px 40px;
    border-width: 10px;
 }

 

 

boder-style

선의 종류

값	의미	기본값
none	선 없음	none
hidden	선 없음과 동일(table 요소에서 사용)
solid	실선(일반선)
dotted	점선
dashed	파선
double	두 줄선
groove	홈이 파여있는 모양(선)
ridge	솟은 모양(선, groove의 반대)
inset	요소 전체가 들어간 모양(선)
outset	요소 전체가 나온 모양(선)

 

 

border-color

선의 색깔

값	의미	기본값
색상	선의 색상을 지정	black
transparent	투명한 선(요소의 배경식이 보임)

 

 

 

자동으로 border크기를 설정하기

box-sizing요소를 이용하면 된다.

.box{
  width: 100px;
  height: 100px;
  background: orange;
  border:10px solid green;
  box-sizing : border-box;
}