맛집 여행 캠핑 일상 생활

CSS border Style 속성 주기 본문

HTML.CSS

CSS border Style 속성 주기

♥ 영은파더♥ 2016. 5. 6. 16:55

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;



'HTML.CSS' 카테고리의 다른 글

HTML/CSS 팝업레이어 브라우저 중앙에 띄우기  (0) 2016.05.11
HTML/CSS DIV IMG 및 텍스트 가운데 정렬하기  (1) 2016.05.10
CSS border Style 속성 주기  (0) 2016.05.06
CSS text-overflow 속성  (0) 2016.05.03
CSS word-break 속성  (0) 2016.05.03
HTML PHP 폼메일 소스  (60) 2016.04.26
Trackback : 0 | Comments : 0
댓글쓰기 폼