[CSS] border 스타일 정리 (예제 포함)

홈페이지에 이미지 테두리나 테이블 또는 그냥 박스를 만들 때 이미지로 하지 않고 스타일시트(CSS)의 border 속성을 이용해서 만들 수가 있다.

 

간단하게 테두리를 두르는 일반적인 박스는 solid로 하면 되는데, 그 외 것들을 자꾸 까먹어서 정리해 본다.

 

박스(정확히 말하면 객체의 테두리 선) 만들때의 기본 요소는 선의 모양(border-style), 선의 굵기(border-width), 선의 색상(border-color) 3가지다.

 

 

선의 모양(border-style)
solid, double, groove, dotted, dashed, inset, outset, ridge, hidden

 

 

 

 

선의 굵기(border-width)와 선의 색상(border-color)은 별도로 설명할 필요는 없을 것 같아 선의 모양(border-style)과 같이 표현해 보겠다.

 

 style에 inset 을 넣고 노란색으로 10pt의 박스를 만든 예

style="border-width: 10pt; border-style: inset; border-color:yellow"

 

 테이블에 border style 을 적용한 예

스타일시트 소스

<style>
table { border-color: #408080; border-style: dashed; }
td { border-color: #FFBD32; border-style: ridge; }

</style>

 

 

 

이 밖에도 박스의 위/아래/좌/우를 별도로 지정해서 값을 지정할 수도 있다.

속성의 명칭은 border-style, border-width, border-color의 중간에 top. bottom, left, right 를 넣으면 된다.

예를 들면, 상단선의 색상의 속성 명칭은 border-top-color 이 된다.

 

 아래에 선을 넣은 예

style="border-bottom-color:green; border-bottom-style:dotted; border-bottom-width:10px;"

 

 좌/우에 선을 넣은 예

style="border-left-color:pink; border-left-style:double; border-left-width:20px; border-right-color:cyan; border-right-style:ridge; border-right-width:10px"

 

 

 

(별군 님께서 지적해 주신 내용을 추가합니다.)

또한, 이 3가지 설정을 한번에 처리할 수도 있다.

3가지 설정값을 묶어서...

상단 : BORDER-TOP: 색상 두께 스타일;

좌측 : BORDER-LEFT: 색상 두께 스타일;

우측 : BORDER-RIGHT: 색상 두께 스타일;

하단 : BORDER-BOTTOM: 색상 두께 스타일;

 

예를 들어 상단 선에 대한 처리를 할 경우 border-top-color, border-top-width, border-top-style 이라고 각각 설정을 해야 하지만

 BORDER-RIGHT: yellow 6px inset;

이렇게 한번에 처리할 수 있다.

 

 

여기까지~!