[border] CSS - border-top 속성 - 테두리상단일괄 (= border-top속성 = 보더탑속성 / 보더톱속성) (상속X)

1. border-top 예제 - 테두리 상단 일괄 지정
2. border-top 정의
3. border-top 구문
4. border-top 개별 속성
5. border-top-width 생략 경우
6. border-top-width / border-top-color 생략 경우

border-top 예제 - 테두리 상단 일괄 지정 

<style>

* {margin-bottom:50px}

h1 {border-top: 10px solid red;}

h2 {border-top: 5px dotted blue;}

div {border-top: double;}

</style>

<h1>홈짱닷컴 Homzzang.com - 홈페이지 제작유지관리</h1>

<h2>홈짱닷컴 Homzzang.com - 홈페이지 제작유지관리</h2>

<div>홈짱닷컴 Homzzang.com - 홈페이지 제작유지관리</div>

결과 보기

border-top 정의

 

테두리 상단 (두께/모양/색상) 일괄 지정 단축 속성.

 

---

 

1.

• 기본값 : medium none color
• 상속여부 : X
• 애니효과 : O
• CSS버전 : CSS1
• JS구문 : object.style.borderTop="2px dashed red"

 

2.

모든 브라우저 지원

 

3. MDN border-top 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/border-top

 

border-top 구문

 

selector {border-top:width style color;}

 

---

[속성값]

 

width

선택. 두께

 

style

필수. 모양

color

필수. 색깔

 

※ 자세한 건 https://homzzang.com/b/css-39 참고
 

border-top 개별 속성

 

• border-top-width : OOpx;
• border-top-style : 속성값;  (필수)
• border-top-color : 색상값; 

 

---

[예제]

 

<style>

h2 {

  border-top-width: 5px ;

  border-top-style: dotted;

  border-top-color: blue;

  color:magenta;

}

</style>

<h2>홈짱닷컴 Homzzang.com - 홈페이지 제작유지관리</h2>

결과 보기 

border-top-width 생략 경우

※ 주의: border-top-width 생략 시, 약 2px 정도 두께 자동 배정

 

<style>

h2 {

  border-top-style: dotted;

  border-top-color: blue;

  color:magenta;

}

</style>

<h2>홈짱닷컴 Homzzang.com - 홈페이지 제작유지관리</h2>

결과 보기

border-top-width / border-top-color 생략 경우

※ 주의: border-top-color 생략 시, text 색깔이 적용됨.

 

<style>

h2 {

  border-top-style: dotted;

  color:magenta;

}

</style>

<h2>홈짱닷컴 Homzzang.com - 홈페이지 제작유지관리</h2>

결과 보기