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

 

지난번에는 버튼의 배경색과 글자색을 바꾸는 방법을 알아보았습니다.

이번에는 테두리 색을 변경하거나, 테두리를 보이지 않도록 하는 방법을 정리하였습니다.

2022.12.10 - [IT/HTML&CSS] - [HTML/CSS] 버튼 배경색 지정하기

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

 

 

버튼 테두리 색 변경, 테두리 없애기

<button class='outline_btn'>빨간 테두리 버튼</button>
<button class='no_outline_btn'>테두리 없는 버튼</button>
<button class='yellow_outline_btn'>노란 테두리 버튼</button>

.outline_btn {
  background-color: yellow;
  border-color: red;
}

.no_outline_btn {
  background-color: yellow;
  border: none;
}

.yellow_outline_btn {
  background-color: yellow;
  border-color: yellow;
}

border-color: red;

border-color 속성을 이용하여, 테두리 색깔을 변경하였습니다.

 

border: none;

border 속성을 none으로 설정하여, 테두리를 제거하였습니다.

 

border-color: yellow;

버튼의 배경색과 테두리 색깔을 동일한 색으로 지정하였습니다.