CSS 속성 알아보기 (요소의 테두리)

 

border 속성 - 테두리 선

 

border: 선-두께 선-종류 선-색상;

/* 요소의 테두리 선을 지정하는 기타 속성들 */
border-방향
border-방향-속성

border-방향: 두께 종류 색상;
border-방향-width: 두께;
border-방향-style: 종류;
border-방향-color: 색상;

요소의 테두리 선을 지정하는 단축 속성, 요소의 크기가 커지는 특성을 가지고 있다

 

선-두께(border-width)

- 요소 테두리 선의 두께, 기본값(medium)

- 단위 px, em, % 등 단위로 지정

 

선-종류(border-style)

- 요소 테두리 선의 종류, 기본값(none)

- solid(실선, 일반선)

- dashed(파선)

 

선-색상(border-color)

- 요소 테두리 선의 색상을 지정하는 단축 속성, 기본값(black)

- 색상은 색상 표현으로 나타낸다

 

색상 표현

 

색을 사용하는 모든 속성에 적용 가능한 색상 표현

 

색상 이름(브라우저에서 제공하는 색상의 이름) - red, blue, royalblue

HEX 색상코드(Hexadecimal Colors, 16진수 색상) - #000, #FFFFFF

RGB(빛의 삼원색) - rgb(255, 255, 255)

RGBA(빛의 삼원색 + 투명도) - rgba(0, 0, 0, 0.5)

 

---

 

border-radius

 

border-radius: 값;

/* 값을 여러개 사용해서 특정 모서리만 깎을 수도 있다 */

요소의 모서리를 둥글게 깎는 속성

 

기본값(0) - 둥글기 없음

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