<html>
<head>
<title>스타일로 테두리 다루기(3D)</title>
<style type="text/css">
<!--
/*여러개 쓰면 시계방향으로 적용(2~3개)면 대칭*/
p.one {border-style: dotted}
/*테두리 점선*/
p.two {border-style: dashed}
/*테두리 데쉬(-)*/
p.three {border-style: solid}
p.four {border-style: double}
/*테두리 두개 사용*/
p.five {border-style: groove}
/*테두리 홈 효과*/
p.six {border-style: ridge}
/*테두리 입체 효과*/
p.seven {border-style: inset}
/*테두리 안쪽 음각 효과*/
p.eight {border-style: outset}
/*테두리 안쪽 양각 효과*/
p.dr {border-style: dashed ridge}
/*top,bottom:dashed - left,right:ridge*/
p.sd {border-style: solid double}
p.io {border-style: inset outset}
p.gd {border-style: groove double}
p.sdg {border-style: solid double groove}
/*top:solid - left,right:double - bottom:groove*/
p.idro {border-style: inset double ridge outset}
/*top,right,bottom,left 순서대로 적용*/
P.bt {background-color: menu; border: buttonhighlight 2px outset}
/*배경색 기본 메뉴색 테두리 2픽셀의 양각효과에 버튼하이라이트색*/
-->
</style>
</head>
<body>
<p class="one">BORDER-STYLE: dotted</p>
<p class="two">BORDER-STYLE: dashed</p>
<p class="three">BORDER-STYLE: solid</p>
<p class="four">BORDER-STYLE: double</p>
<p class="five">BORDER-STYLE: groove</p>
<p class="six">BORDER-STYLE:ridge</p>
<p class="seven">BORDER-STYLE: inset</p>
<p class="eight">BORDER-STYLE: outset</p>
<p class="dr">BORDER-STYLE: dashed ridge</p>
<p class="sd">BORDER-STYLE: solid double</p>
<p class="io">BORDER-STYLE: inset outset</p>
<p class="gd">BORDER-STYLE: groove double</p>
<p class="sdg">BORDER-STYLE: solid double groove</p>
<p class="idro">BORDER-STYLE: inset double ridge outset</p>
<p class="bt">BACKGROUND-COLOR: menu; BORDER: buttonhighlight 2px outset</p>
</body>
</html>
오렌지
