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

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

인수

cssSelector : (스타일 선택자)

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

sVal : (속성 문자열)

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

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

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

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

특기

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

width 나 color를 지정할 때, style을 지정하여야 테두리가 나타나고, 지정하지 않으면 테두리가 표시되지 않는다.

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

border=thin로 설정하는 것은 border=thin none과 동일하다. 테두리 색상이 설정되어 있지 않으면 테두리 색상의 디폴트값은 텍스트 색상과 같다. 따라서 width 속성을 thin으로 설정할 뿐 아니라, 이전에 설정되었던 style이나 color 값을 지운다.

border 속성을 0으로 설정하거나 애트리뷰트를 생략하면 테두리가 나타나지 않는다. border 속성을 값없이 설정하면 디폴트인 단일 테두리가 적용된다.

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

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

색상표를 참조하라.

적용

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

참조

border borderColor borderStyle borderWidth

이 속성은 (영문)DOM(Document Object Model Level 1)과 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.

style ⇒

border 스타일속성⇒

noborderClass border1Class border2Class
border3Class border4Class border5Class

결과 표시창

<STYLE>
.border1Class { border:10px groove pink }
.border2Class { border:10px dotted pink }
.border3Class { border:10px solid pink }
.border4Class { border:10px double pink }
.border5Class { border:10px inset pink }
.noborderClass { border:none }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderWidth='+tdObj.currentStyle.borderWidth+'<BR>';
  str+='tdObj.currentStyle.borderStyle='+tdObj.currentStyle.borderStyle+'<BR>';
  str+='tdObj.currentStyle.borderColor='+tdObj.currentStyle.borderColor+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<TABLE border cellspacing=5 width=100%>
<TR>
<TD id="tdObj"><IMG src="../../gif/flower.jpg" width="300"></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 ⇒

border 스타일속성

⇒

최종 수정: 04/05/2025 10:25:14

All right reserved

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

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