[CSS] 보더(Border, 테두리)를 지정하기

보더(Border)는 패딩(Padding)과 마진(Margin)의 경계선으로 사방 모든 선을 표시할 수 있습니다. 보더의 두께, 선 색상을 각각 지정합니다. 일괄적으로 지정할 수도 있습니다.

보더 영역은 배경이 표시되지만, 보더 속성이 지정되어 있는 경우에는 보더가 우선적으로 표시됩니다.

보더의 종류

상하 좌우의 보더의 스타일을 일괄적으로 지정 합니다. 보더의 종류에는 단선, 복선, 파선, 점선 등이 있습니다.

스폰서 링크

border:두께 선종류 색상;

<style>
　.solid {border:2px solid #F0F;}
　.dashed {border:2px dashed #F0F;}
　.double {border:5px double #F0F;}
　.ridge {border:8px ridge #F0F;}
　.groove {border:8px groove #F0F;}
　.inset {border:8px inset #F0F;}
　.outset {border:8px outset #F0F;}
　.dotted {border:2px dotted #F0F;}
</style>

none	표시하지 않는다.
solid	단선(실선)으로 표시.
dashed	파선으로 표시.
double	복선(이중선)으로 표시.
ridge	튀어 나와 보이는(돌출)로 표시.
groove	들어가 보이도록 쵸시.
inset	보더 안쪽이 움푹 패여 보이게 표시.
outset	보더 안쪽이 튀어 나와 보이게 볼록형으로 표시.
dotted	점선으로 표시.
hidden	표시하지 않는다.(경계가 겹치는 경우에 우선함.)

border-style을 개별적으로 지정

하나의 박스(Box)의 상하 좌우 테두리에 보더 스타일을 개별적으로 지정합니다. 상하 좌우 부분에 각각 top, right, bottom left가 들어갑니다.

border-style 속성의 초기 값이 none으로 되어 있기 때문에, 보더는 굵기와 색상만 지정해도 표시되지 않기 때문에, 보더를 표시하려면 굵기와 색상뿐만 아니라 종류도 동시에 지정해야 합니다.

border-상하 좌우-style：속성 값;

<style>
 .bordering{
	border-top-style: double;
    border-bottom-style: dotted;
    border-left-style: solid; 
    border-right-style: outset;
 　}
</style>

　sample

border-style을 일괄 지정

보더는 보더의 종류를 한꺼번에로 지정할 수 있습니다. 상하 좌우의 테두리 유형의 값을 공백으로 구분하여, 임의의 순서로 지정합니다. 다음의 4가지로 표기합니다.

border-style：속성 값;

<style>
 .border1{border-style: solid;} /*상하좌우*/
 .border2{border-style: solid double;} /*상하・좌우*/
 .border3{border-style: solid dotted double;} /*상・좌우・하*/
 .border4{border-style: solid dotted double dashed;} /*상・우・하・좌*/
</style>

　sample

border-style의 색상을 개별적으로 지정

보더(테두리)의 색상을 지정하는 값은 16진수, RGB 10진수로 나타냅니다. 테두리의 색상을 지정하려면 테두리의 종류도 지정해야 합니다.

border-상하좌우-color：속성 값;

<style>
 .border{
	border-top-color:#F00;
	border-bottom-color:#0C0;
	border-left-color:#000;
	border-right-color:#00F;
	border-style:solid;
	border-width: 10px;
 　}
</style>

sample

border-style의 색상을 한꺼번에 지정

테두리의 색상을 지정하는 값은 16진수, RGB 10진수로 나타냅니다. 테두리의 색상을 지정하려면 테두리의 종류도 지정해야 합니다. 다음의 4가지로 표기합니다.

종류	지정 방법	예
16진수	RGB 값을 16진수로 한 줄 또는 두 줄로 지정	#fff　or　#ffffff
rgb(R,G,B)	RGB를 10진수로 지정	rgb(90,0,45)
rgb(R%,G%,B%)	RGB를 백분율(%)로 지정	rgb(90%,0%,45%)
색 이름	색상의 이름으로 지정	red

border-상하좌우-color：속성 값;

<style>
 .border1{
 　border-style:solid;
 　border-width:10px;
 　border-color:#F00;} /*상하좌우*/
 .border2{
 　border-style:solid;
 　border-width:10px;
 　border-color:#F00 0C0;} /*상하・좌우*/
 .border3{
 　border-style:solid;
 　border-width:10px;
 　border-color:#F00 #0C0 red;} /*상・좌우・하*/
 .border4{
 　border-style:solid;
 　border-width:10px;
 　border-color:#F00 #0C0 red #3300ff;} /*상・우・하・좌*/
</style>

　sample

스폰서 링크