개체의 위쪽 테두리(border) 속성들을 복합 축약 속성으로 반환하거나 설정한다.

	Script	object.style.borderTop=[sVal]
	HTML	<ELEMENT style="border-top:sVal;">
	CSS	cssSelector {border-top:sVal;}

인수

cssSelector : (스타일 선택자)

borderTop 속성을 가질수 있는 엘레멘트(ELEMENT)나 클라스(class) 이름 혹은 인식자(id)이다.

sVal : (속성 문자열)

borderTop 스타일 속성은 개체의 위쪽 테두리(border) 속성들을 복합 축약 속성으로 나타내는 문자열이다.

(너비)	width	borderTopWidth 속성에서 유효한 배경의 위치값이다.
(스타일)	style	borderTopStyle 속성에서 유효한 배경의 위치값이다.
(색상)	color	borderTopColor 속성에서 유효한 배경의 위치값이다.

이 속성은 읽기/쓰기이며, 디폴트값은 medium none이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

borderTop 속성은 위쪽 테두리(border)의 width, style과 color 값들을 한번에 설정하는 복합 축약 속성이다.

borderTop 복합 축약 속성으로 모든 개별 테두리 속성들을 지정하지 않으면 지정되지 않은 속성에는 디폴트값이 적용된다. 예를들어 width의 디폴트값은 medium이다.

color가 지정되지 않으면, 텍스트 색상이 적용된다.

색상표를 참조하라.

IE5.5에서 이 속성은 인라인 엘레멘트에 적용된다. 이전 버전에서는 인라인 엘레멘트는 position 속성값이 absolute이거나 이 속성을 이용하여 배치되어야 한다. height나 width 속성의 설정된 값에 의하여 엘레멘트의 배치가 결정된다.

적용

개체	script	CSS CSS 규격	IE 버전
a	a.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
acronym	acronym.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
b	b.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
bdo	bdo.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE5(win16,win32,unix,mac)
big	big.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
blockQuote	blockQuote.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
body	body.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
button	button.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
caption	caption.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
center	center.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
cite	cite.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
code	code.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
custom	custom.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE5(win32,unix)
dd	dd.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
publicDefaults	publicDefaults.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE5.5(win32)
del	del.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
dfn	dfn.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
dir	dir.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
div	div.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
dl	dl.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
dt	dt.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
em	em.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
embed	embed.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
fieldSet	fieldSet.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
font	font.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
form	form.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
frameSet	frameSet.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
frame	frame.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
hn	hn.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
i	i.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
iFrame	iFrame.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
img	img.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
button	button.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
checkbox	checkbox.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
FileUpload	FileUpload.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
image	image.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
password	password.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
radio	radio.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
reset	reset.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
submit	submit.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
text	text.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
ins	ins.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
isIndex	isIndex.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
kbd	kbd.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
label	label.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
li	li.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
listing	listing.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
marquee	marquee.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
menu	menu.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
noBR	noBR.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
Object	Object.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
ol	ol.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
p	p.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
plainText	plainText.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
pre	pre.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
q	q.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
runtimeStyle	objectruntimeStyle.borderTop[=sVal]	cssSelector{border-top:sVal}	IE5(win16,win32,unix,mac)
s	s.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
samp	samp.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
small	small.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
span	span.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
strike	strike.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
strong	strong.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
style	style.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
sub	sub.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
sup	sup.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
table	table.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
td	td.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
textArea	textArea.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
th	th.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
tt	tt.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
u	u.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
ul	ul.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
var	var.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)
xmp	xmp.style.borderTop[=sVal]	cssSelector{border-top:sVal}	IE4.0(win16,win32,ce,unix,mac)

참조

border borderTop borderTopColor borderTopStyle borderTopWidth

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.

style ⇒

borderTop 스타일속성⇒

noborderClass border1Class border2Class
border3Class border4Class border5Class

결과 표시창

<STYLE>
.border1Class { border-top:10px groove pink }
.border2Class { border-top:10px dotted pink }
.border3Class { border-top:10px solid pink }
.border4Class { border-top:10px double pink }
.border5Class { border-top:10px inset pink }
.noborderClass { border-top:none }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderTopWidth='+tdObj.currentStyle.borderTopWidth+'<BR>';
  str+='tdObj.currentStyle.borderTopStyle='+tdObj.currentStyle.borderTopStyle+'<BR>';
  str+='tdObj.currentStyle.borderTopColor='+tdObj.currentStyle.borderTopColor+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<TABLE border cellspacing=5>
<TR>
<TD id="tdObj"><IMG src="../../gif/flower.jpg" width="330"></TD>
</TR>
</TABLE>
<BUTTON onclick="tdObj.className='noborderClass';showAll()">noborderClass</BUTTON>
<BUTTON onclick="tdObj.className='border1Class';showAll()">border1Class</BUTTON>
<BUTTON onclick="tdObj.className='border2Class';showAll()">border2Class</BUTTON><BR>
<BUTTON onclick="tdObj.className='border3Class';showAll()">border3Class</BUTTON>
<BUTTON onclick="tdObj.className='border4Class';showAll()">border4Class</BUTTON>
<BUTTON onclick="tdObj.className='border5Class';showAll()">border5Class</BUTTON>
<DIV id=showA>결과 표시창</DIV>

style ⇒

borderTop 스타일속성

⇒

최종 수정: 04/07/2025 04:55:04

All right reserved

비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다. 오류가 나면 정상적 접속으로 시도해 보세요.

http://koxo.com/lang/js/style/borderTop.html