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

보더(Border)는 아래의 회색 테두리의 두께를 지정합니다. 테두리 두께 지정 방법은 상하 좌우를 함께 지정하는 방법과, 각각을 개별적으로 지정하는 방법이 있습니다.

보더 두께를 표시하려면 테두리 유형을 지정해야 합니다.

테두리 두께를 개별적으로 지정

border-style을 개별적으로 지정

박스(Box)의 보더 두께를 상하 좌우로 개별적으로 지정할 수 있습니다.

상하 좌우 부분에 각각 top, right, bottom, left가 들어갑니다. 보더는 굵기와 색상만 지정하면 표시되지 않기 때문에, 보더를 표시하려면 굵기와 색상뿐만 아니라 종류도 동시에 지정해야 합니다.

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

<style>
 .border {
	border-style:solid;
    border-top-width: thin;
    border-bottom-width: thick;
    border-left-width: 20px;
    border-right-width: medium;
    border-radius: 2px;
 　}
</style>
 

sample

border의 두께를 한꺼번에 지정

보더 두께를 한꺼번에 지정할 수 있습니다. 상하 좌우의 보더의 두께 값을 공백으로 구분하며 임의의 순서로 지정합니다.

속성 값은 수치에 픽셀 단위를 붙이지만, 키워드로 지정합니다. 다음의 4가지로 표기합니다.

border-width：値;

<style>
 .border1{
   border-style: solid; 
   border-width: 3px;/*상하좌우*/
   } 
 .border2{
   border-style: solid; 
   border-width: 3px thin; /*상하・좌우*/
   }
 .border3{
   border-style: solid;
   border-width: 3px thin thick;/*상・좌우・하*/
   } 
 .border4{
   border-style: solid;
   border-width: medium thin 20px thick;/*상・우・하・좌*/
   }  
</style>
 

border-width: medium thin 20px thick;