Html/CSS border 속성(테두리 선 점선 파선 이중선 입체선)

Html/CSS border 속성(테두리 선 점선 파선 이중선 입체선)

 

 

none

hidden

solid

dotted

dashed

ridge

double

groove

inset

outset

 

 

border-style 테두리의 스타일 설정

 

none	없음
hidden	선을 숨김. table 요소에서만 border-collapse에 따라 달라진다.
dotted	점선 설정
dashed	파선 설정
solid	실선 설정
double	두줄 실선 설정
groove	내용이 도두라지고 선만 안쪽으로 입체선 설정
ridge	내용은 안쪽에 위치하고 바깥쪽 입체선 설정
inset	내용이 안쪽으로 오목하게 안쪽 입체선 설정
outset	내용이 바깥쪽으로 볼록하게 바깥쪽 입체선 설정

 

 

border-width 테두리의 두께 설정

border-top-width (상단), border-right-width (우측), border-bottom-width (하단), border-left-width (좌측) 를 원하는 값으로 각각 지정할 수 있다.

 

border-width로 한번에 지정해줄수 있다.

예를 들면 border-width : 1px 이라면 상, 우, 하, 좌에 1px의 두께로 선을 만드것이고, border-width : 1px 3px 라면 상,하는 1px의 두께 선. 좌,우엔 3px의 두께 선을 만드는 것이다.

 

그리고 border-width : 1px 3px 5px 로 설정을 하면 상 1px, 좌,우 3px, 하 5px의 두께로 선을 만들고, border-width : 1px 3px 5px 7px 로 설정하면 상 1px, 우 3px, 하 5px, 좌 7px의 두께로 선을 만들 수 있다.

 

border-color 테두리의 색 설정

색상은 #fff000(6자리 숫자의 색상코드), rgb(176,140, 70) , transparent(투명을 의미) 등으로 지정하며, 테두리 두께를 설정할 때와 마찬가지로 border-top-color등으로 상, 우, 하, 좌 각각 지정할 수 있고 한꺼번에 지정도 가능하다.

 

html/CSS에서 .boderstyle {double 3px #e52e52;}는 두줄 실선으로 두께 3px의 빨간색 테두리가 생기는 설정이다. 이 처럼 border 설정을 한꺼번에 스타일, 두께, 색을 지정할 수 있다.

 

[예제]

 

border-width:5px 10px 2px 15px; border-color:orange slateblue gray deepskyblue; border-style: dotted double dashed solid

 

<DIV style="border-width:5px 10px 2px 15px; border-color:orange slateblue gray deepskyblue; border-style:dotted double dashed solid; padding:15px; width:80%;">
border-width:5px 10px 2px 15px; border-color:orange slateblue gray deepskyblue; border-style: dotted double dashed solid
</DIV>