[border] CSS - border-left 속성 - 테두리좌측일괄 (= 테두리왼쪽일괄 = border-left속성 = 보더레프트속성)

1. border-left 예제 - 테두리 좌측
2. border-left 정의
3. border-left 구문

border-left 예제 - 테두리 좌측

 

<style>

h1 {border-left: 5px solid red;}

h2 {border-left: 4px dotted blue;}

div {border-left: double;}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<h2>홈짱닷컴 Homzzang.com</h2>

<div>홈짱닷컴 Homzzang.com</div>

 

결과 보기 

border-left 정의

 

테두리 왼쪽 스타일 일괄 지정.

• border-left-width (너비)
• border-left-style (모양) - 필수
• border-left-color (색상) - 생략 시, 텍스트 색상이 자동 적용됨.

 

---

 

1.

• 기본값: medium none color
• 상속여부: X
• 애니효과: O
• CSS버전: CSS1
• JS구문: object.style.borderLeft="3px dotted blue";

 

2.
주요 브라우저 모두 지원.

 

border-left 구문

 

selector {border-left: border-width border-style border-color|initial|inherit;}

 

---

[속성값]

 

border-left-width

선택. 왼쪽테두리 너비. (기본값: "medium")

 

border-left-style

필수. 왼쪽테두리 스타일. (기본값: "none")

 

border-left-color

선택. 왼쪽테두리 색상. (기본값: 텍스트의 색상)

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.