본문 바로가기

HTML / CSS / Java Script

스타일시트로 테두리 꾸미기(border-style)

테두리 형태 지정(border-style)

border-style속성을 사용하면 테블이나 여러가지의 입력양식의 테두리형태를 선, 점 등으로 지정할수 있어요


<STYLE>
<!-- 
	Selector {border-style:옵션}
-->
</STYLE>

속성 옵션

none : 테두리없음
dotted : 점으로 나타남
dashed : 점선으로 나타남
solid : 한줄의 선으로 나타남
double : 두줄의 선으로 나타남
groove : 입체감있게 나타남
ridge : 테두리가 볼록하게됨
inset : 전체가 들어가보임?
outset : 전테가 튀어나와보임


테두리



border-color의 색상값을 1개만 지정하면 테두리 전체가 지정되고 2개만 지정하면 [상,하] [좌,우]에 적용되요
4개를 지정하면 top, right, bottom, left 순서로 시계방향으로 적용됩니다.


<STYLE>
<!-- 
	Selector {border-color:색상1, 색상2, 색상3, 색상4}
-->
</STYLE>


테두리 두께를 방향별루 지정할 경우 border-style를 먼저 설정한 후에 할수 있어요
두께를 지정할때 원하는 수치로 직접 지정하는 방법과 thin(두께가얇은선), medium(중간굵기인선), thick(두꺼운선)으로 지정하는 방법이있음


border


<STYLE>
<!-- 
	Selector {border-width:top두께 right두께 bottom두께 left두께}
-->
</STYLE>

참고 border-width:10px 3px 10px 25px;

옵션값은 위에 설명한 border-color와 같은 원리에요 시계방향 한개일때 두개일때...