요소의 테두리를 둥글게 만들 때 사용됩니다. 이 속성은 네 개의 값 또는 하나의 값으로 지정할 수 있습니다.

• 단일 값 사용 : 이 경우에는 모든 네 모서리가 10px의 원형으로 둥글게 됩니다.
  

.example {
  border-radius: 10px;
}

• 네 개의 값 사용 : 위에서부터 시계방향으로 적용되며, 좌상단, 우상단, 우하단, 좌하단의 각 모서리에 대해 각각 서로 다른 값이 지정됩니다.
  

.example {
  border-radius: 10px 20px 30px 40px;
}

• 두 개의 값 사용 : 첫 번째 값은 좌상단과 우하단의 모서리를 나타내며, 두 번째 값은 우상단과 좌하단의 모서리를 나타냅니다.
  

.example {
  border-radius: 10px 20px;
}

• 타원형 모서리 : 이와 같이 백분율을 사용하여 원형이 아닌 타원형의 테두리를 만들 수도 있습니다.
  

.example {
  border-radius: 50% 20%;
}

참고

• https://webdesign.tutsplus.com/quick-tip-rounded-corners-done-right--webdesign-7127t
• https://velog.io/@broccolism/border-radius%EB%A5%BC-%EC%A0%95%ED%95%A0-%EB%95%8C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90
• https://css-irl.info/logical-border-radius/