목차
border-top 예제 - 테두리 상단 일괄 지정
border-top 정의
border-top 구문
border-top 개별 속성
border-top-width 생략 경우
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>
결과 보기
주소 복사
랜덤 이동