CSS 테두리 선 속성

border: 선-두께(border-width), 선-종류(border-style), 선-색상(border-color);

-> 요소의 테두리 선을 지정하는 단축 속성 (요소의 크기가 커지는 특징)

 

기본값

border: medium none black;

 

예시

 border: 10px solid orange

 

border-width: 요소 테두리 선의 두께

medium: 중간 두께

thin: 얇은 두께

thick: 두꺼운 두께

단위: px, em, % 등 단위로 지정 (권장)

 

최대 4가지 값까지 입력 가능(border-width: 10px 20px 30px 40px;), 띄어쓰기로 구분

border-width: top,right,bottom,left;

border-width: top,bottom  left,right;

border-width: top left,right bottom;

border-width: top right bottom left;

 

border-style: 테두리 선의 종류

none: 선 없음

solid: 실선 (일반 선)

dotted: 점선

dashed: 파선

double: 두 줄 선

groove: 홈이 파여있는 모양

ridge: 솟은 모양 (groove의 반대)

inset: 요소 전체가 들어간 모양

outset: 요소 전체가 나온 모양

 

border-style: top,right,bottom,left;

border-style: top,bottom  left,right;

border-style: top left,right bottom;

border-style: top right bottom left;

 

border-color: 테두리 선의 색상을 지정하는 단축 속성

black: 검정색 (기본)

색상: 선의 색상

transparent: 투명

 

border-color: top,right,bottom,left;

border-color: top,bottom  left,right;

border-color: top left,right bottom;

border-color: top right bottom left;

 

 

border-radius: 요소의 모서리를 둥글게 깎음

0: 둥글게 없음(기본값)

단위: px, em, vw 등 단위로 지정

원하는 모서리만 둥글게 깎을 수 있음

 

오른쪽 위 모서리만 깎는 예제

border-radius: 0 10px 0 0