[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  

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

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

 

 

  예제 2  

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

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

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