[CSS] 테두리 스타일

border-style

border-style:none
border-style:dotted
border-style:dashed
border-style:solid
border-style:double
border-style:groove
border-style:ridge
border-style:inset
border-style:outset

* 4개의 태드리선을 모두 다르게 적용하려면 border-top-style border-bottom-style border-left-style border-right-style 를 따로 따로 지정해야한다.

■ border-color

border-color:#006699 border-style:dotted
border-color:tomato border-style:dashed
border-color:orange border-style:solid

* 4개의 태드리선을 모두 다르게 적용하려면 border-top-color border-bottom-color border-left-color border-right-color 를 따로 따로 지정해야한다.

■ border-width

border-width:1px border-color:#006699 border-style:dotted	1px 3px
border-width:1px border-color:tomato border-style:dashed	1px 3px
border-width:1px border-color:orange border-style:solid	1px 3px

* 4개의 태드리선을 모두 다르게 적용하려면 border-top-width border-bottom-width border-left-width border-right-width 를 따로 따로 지정해야한다.

■ margin (바깥쪽 여백)

margin:3px border-width:1px border-color:#006699 border-style:dotted

margin 없이 margin:3px margin:10px

* 4개의 태드리선을 모두 다르게 적용하려면 margin- top margin-bottom margin-left margin-right 를 따로 따로 지정해야한다.

■ width, height

width=300 height=40 border-width:1px border-color:#006699 border-style:dotted

width=300 height=40

■ padding (안쪽 여백)

padding:5px width=300px border-width:1px border-color:#006699 border-style:dotted

내용물 주위로 여백이...

* 4개의 태드리선을 모두 다르게 적용하려면 padding-top padding-bottom padding-left padding-right 를 따로 따로 지정해야한다. 원본 링크 : http://www.webmadang.net/script/script.do?action=read&boardid=3002&page=2&seq=11