• Q&A
  • 회원가입
  • 로그인

[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 개별 속성

 

 


[예제]

 

<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>


결과 보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012