[HTML/CSS] 버튼 테두리 두께 지정하기 (border-width)

 

버튼에 대한 스타일링 속성들을 알아보고 있습니다.

[HTML/CSS] 버튼 크기 조정하기 (padding)

[HTML/CSS] 버튼 테두리 둥글게 만들기 (border-radius)

[HMTL/CSS] 버튼 테두리 색 변경, 테두리 없애기

[HTML/CSS] 버튼 글자색 변경하기 (color)

[HTML/CSS] 버튼 배경색 지정하기

[HTML/CSS] 버튼 마우스 오버, 클릭 시 배경색 변경하기

 

 

border-width

버튼의 테두리 두께를 지정하기 위해 border-width 속성을 사용할 수 있습니다.

border-width 속성은 다음의 4가지 속성 정보를 포함합니다.

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

그리고, 다음의 3가지 키워드와 너비를 지정하는 값을 사용할 수 있습니다.

• thin
• medium
• thick

 

 

  예제 1  

<button> Default </button>
<button class='thin'> thin </button>
<button class='medium'> medium </button>
<button class='thick'> thick </button>
<button class='px'> 10px </button>

.thin {
  border-width: thin;
}

.medium {
  border-width: medium;
}


.thick {
  border-width: thick;
}


.px {
  border-width: 10px;
}

thin, medium, thick 키워드와 너비를 지정할 수 있는 표현으로

border-width의 값을 지정하여, 버튼의 테두리 두께를 지정할 수 있습니다.

 

 

  예제 2  

<button class='one'> one </button>
<button class='two'> two </button>
<button class='three'> three </button>
<button class='four'> four </button>

.one {
  /* 4면에 모두 적용됨 */
  border-width: medium; 
}

.two {
  /* 위, 아래 : thin */
  /* 왼쪽, 오른쪽 : thick */
  border-width: thin thick;
}


.three {
  /* 위 : thin */
  /* 왼쪽, 오른쪽 : medium */
  /* 아래 : thick */
  border-width: thin medium thick;
}


.four {
  /* 위 : thin */
  /* 오른쪽 : medium */
  /* 아래 : thick */
  /* 왼쪽 : 10px */
  border-width: thin medium thick 10px;
}

border-width 속성은 다음의 4가지 속성 정보를 포함하는 단축 속성입니다.

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

border-width의 값의 갯수에 따라, 각 4면의 테두리 두께를 다르게 지정할 수 있습니다.