border-radius 둥근 모서리

개념 이해하기

border-radius는 각 모서리의 반지름을 정합니다. 50%는 정사각형을 원으로 만들고 충분히 큰 값은 높이에 맞는 캡슐 형태를 만듭니다.

border-radius에 값을 두 개 주면 첫 값은 왼쪽 위와 오른쪽 아래에, 둘째 값은 오른쪽 위와 왼쪽 아래에 대각선으로 짝지어 들어가므로 첫 상자는 24px와 4px 모서리가 엇갈린 모양이 됩니다. 두 번째 상자는 90px 정사각형에 50%를 주어 노란 원이 되지만, padding 20px가 그대로 남아 글자는 50px 폭 안에서 두 줄로 접혀 원의 왼쪽 위에 놓입니다.

border-radius는 자기 배경과 테두리만 깎고 자식 요소는 자르지 않아서, 모서리에 닿는 이미지는 각진 채로 튀어나옵니다. 자식까지 둥근 모양으로 잘라 내려면 부모에 overflow: hidden이나 overflow: clip을 함께 줍니다.