css 테두리선 border 과 색상 표현, border-radius, 모서리 둥글게

border : 선-두께 선-종류 선-색상;
               요소의 테두리 선을 지정하는 단축 속성

• border : 요소의 크기가 커짐, 패딩과 같이..! 
• border-width 선-두께
  단위 : px, em, % 등 단위로 지정하는 정확한 수치로 표현!
• border-style 선-종류
  none : 선 없음
  solid : 실선(일반 선)
  dashed : 파선, 점선
  dotted, double, groove, ridge, inset, outset 등이 있다.
• border-color 선-색상
  black : 검정색 (기본값)
  색상 : 선의 색상 (직접 지정)
  transparent : 투명

 top, right, bottom, left; 모두적용

top, bottom right, left;

top left,right bottom;

top, right, bottom, left; 시계방향으로 적용

 

border-방향

border-방향-속성

 

border-top : 두께 종류 색상;

border-top-width : 두께;

border-top-style : 종류;

border-top-color : 색상;

 

---

 

색상 표현

• 색상 이름 : 브라우저에서 제공하는 색상 이름 => red, tomato, royalblue...
• Hex 색상코드 : 16진수 색상(Hexadecimal Colors) => #000, #FFFFF...
• RGB : 빛의 삼원색 => rgb(255, 255, 255)
• RGBA : 빛의 삼원색 + 투명도 => rgba(0, 0, 0, 0.5) 마지막이 투명도..! 0~1 (1이 불투명)

 

---

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

• 0 : 둥글게 없음
• 단위 : px, em, vw 등 단위로 지정

border-radius : 0;

border-radius : 10px;

border-radius : 0 10px 0 0; (값이 4개일땐 왼쪽 상단부터 시계방향으로 돈다)

                           왼쪽 오른쪽 오른쪽아래 왼쪽아래

 

---

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/border

border - CSS: Cascading Style Sheets | MDN