CSS에서 블록 테두리 둥글게 만들기

지금부터 우리는 블록의 모서리를 둥글게 만드는 방법을 배울 것입니다. 이를 위해서는 픽셀 단위의 값을 받는 속성 border-radius를 사용해야 합니다.

예를 들어 10px와 같은 둥글림 값을 지정했다는 것은 무엇을 의미할까요? 이는 이 둥근 모서리에 내접할 수 있는 원의 반지름입니다. 수학과 친하지 않고 마지막 문장이 이해가 되지 않는다면 그냥 잊어버리고 눈으로 둥글림 값을 조절하면 됩니다. 약간의 경험이 있다면 문제없이 할 수 있습니다 (둥글림을 측정하는 측정 도구는 존재하지 않습니다, 적어도 저는 들어본 적이 없습니다).

블록의 둥글림 값을 10px로 설정하여 모서리를 둥글게 만들어 봅시다:

html<div id="elem"></div>

css#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px;
}

Результат: