CSS border Style 속성 주기

CSS border Style 속성 주기

border 속성에 대한 예제이다.

<style>

#bStyle1 { border-width:1px;border-style:dotted; }

#bStyle2 { border-width:1px;border-style:dashed; }

#bStyle3 { border-width:3px;border-style:double; }

#bStyle4 { border-width:5px;border-style:groove; }

#bStyle5 { border-width:5px;border-style:inset; }

#bStyle6 { border-width:5px;border-style:outset; }

#bStyle7 { border-width:5px;border-style:ridge; }

#bStyle8 { border-width:5px;border-style:solid; }

#bStyle9 { border-style:solid dotted dashed double;border-color:#0000FF; }

#bStyle10 { border-style:none dotted dashed double;border-color:#0000FF; }

#bStyle11 { border:3px solid #FF0000; }

#bStyle12 { border-top:solid;border-bottom:double; }

#bStyle13 { border-left:solid;border-right:dotted; }

</style>

<div id="bStyle1">border-width:1px;border-style:dotted;</div>

<br/>

<div id="bStyle2">border-width:1px;border-style:dashed;</div>

<br/>

<div id="bStyle3">border-width:3px;border-style:double;</div>

<br/>

<div id="bStyle4">border-width:5px;border-style:groove;</div>

<br/>

<div id="bStyle5">border-width:5px;border-style:inset;</div>

<br/>

<div id="bStyle6">border-width:5px;border-style:outset;</div>

<br/>

<div id="bStyle7">border-width:5px;border-style:ridge;</div>

<br/>

<div id="bStyle8">border-width:5px;border-style:solid;</div>

<br/>

<div id="bStyle9">border-style:solid dotted dashed double;border-color:#0000FF;</div>

<br/>

<div id="bStyle10">border-style:none dotted dashed double;border-color:#0000FF;</div>

<br/>

<div id="bStyle11">border:3px solid #FF0000;</div>

<br/>

<div id="bStyle12">border-top:solid;border-bottom:double;</div>

<br/>

<div id="bStyle13">border-left:solid;border-right:dotted;</div>

<br/>

border-width:1px;border-style:dotted;

border-width:1px;border-style:dashed;

border-width:3px;border-style:double;

border-width:5px;border-style:groove;

border-width:5px;border-style:inset;

border-width:5px;border-style:outset;

border-width:5px;border-style:ridge;

border-width:5px;border-style:solid;

border-style:solid dotted dashed double;border-color:#0000FF;

border-style:none dotted dashed double;border-color:#0000FF;

border:3px solid #FF0000;

border-top:solid;border-bottom:double;

border-left:solid;border-right:dotted;