CSS 테두리 선(border)과 색상 표현

테두리 선(border)과 색상 표현

요소의 테두리 선을 지정하는 단축 속성


border-width : 요소 테두리 선의 두께
단위 : px, em, % 등 단위로 지정

border-style : 요소 테두리 선의 종류
none : 선 없음
solid : 실선(일반 선)
dashed : 파선
dotted : 점선

border-color : 요소 테두리 선의 색상을 지정하는 단축 속성
black : 검정색
색상 : 선의 색상
transparent : 투명

 

 

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

.first-border{
	border: 5px solid black;
}

first-border 클래스에 검은색 실선으로 5px 두께의 테두리 선 생성

---

모서리 둥글게

요소의 모서리를 둥굴게 깎음

border-radius

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

 

.first-border{
	border: 5px solid black;
    border-radius: 5px;
}

---

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

색상 이름 : 브라우저에서 제공하는 색상 이름 : red, tomato, royalblue

Hex 색상 코드 : 16진수 색상(Hexadecimal Colors) : #000, #FFFFFF

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

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