border: 선-두께 선-종류 선-색상;
-> 요소의 테두리 선을 지정하는 단축 속성
border : 요소의 크기가 커짐
선-두께 : border-width
선-종류 : border-style
선 색상 : border-color
ex. border의 기본값
-> border: medium none black;
border-width : 요소 테두리 선의 두께
-> 개별 속성 이면서 단축 속성 (padding,margin과 같음)
기본값 : medium(중간 두께)
border-style : 요소 테두리 선의 종류
-> 개별 속성 이면서 단축 속성 (padding,margin과 같음)
- 기본값 : none (선 없음)
solid(실선)
dashed(파선)
border-color : 요소 테두리 선의 색상을 지정하는 단축 속성
-> 개별 속성 이면서 단축 속성 (padding,margin과 같음)
기본 값 : black(검정색)
transparent(투명색)
border-radius : 요소의 모서서리를 둥글게 깎음
- 기본값 : 0 (둥글게 없음)
- 단위 : px, em, vw 등 단위로 지정
border-radius: 0 0 0 0
(사각형 모서리의 왼쪽 상단부터 시계 방향으로 1,2,3,4)
css 색상 표현 방법
- 색상 이름 : 브라우저에서 제공하는 색상 이름 (ex red, tomato, royalblue)
- Hex 색상 코드 : 16진수 색상 (ex #000, #FFFFFF)
- RGB : 빛의 삼원색 (ex rgb(255, 255, 255)
- RGBA : 빛의 삼원색 + 투명도 (ex rgba(0, 0, 0, 0.5)
border 개별 속성
border-top: 두께 종류 색상;
border-top-width: 두께;
border-top-style: 종류;
border-top-color: 색상;
border-right: 두께 종류 색상;
border-right-width: 두께;
border-right-style: 종류;
border-right-color: 색상;
border-left: 두께 종류 색상;
border-left-width: 두께;
border-left-style: 종류;
border-left-color: 색상;
border-bottom: 두께 종류 색상;
border-bottom-width: 두께;
border-bottom-style: 종류;
border-bottom-color: 색상;