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

 

border-radius

버튼의 테두리를 둥글게 하기 위해서는 border-radius 속성을 사용합니다.

이 속성은 요소의 각 테두리를 둥글게 하는 속성으로,

1개~8개까지의 값을 지정할 수 있습니다.

border-radius 속성에 대한 자세한 설명 및 사용방법은 아래의 지난 포스팅을 참조하세요.

[HTML/CSS] div 테두리 모서리 둥글게 만들기 (border-radius)

 

 

 

버튼 테두리 둥글게 만들기 예제

<button class='my_btn'>둥근 테두리 버튼</button>

.my_btn {
  font-size: 30px;
  background-color: skyblue;
  color: white;
  border: none;
  
  border-radius: 20px;
}

border-radius: 20px;

border-radius에 1개 값을 지정하면, 모든 모서리에 동일한 값이 적용된 곡선이 그려집니다.