모서리를 둥글게 만들고 원·캡슐 형태를 구성합니다.
border-radius는 각 모서리의 반지름을 정합니다. 50%는 정사각형을 원으로 만들고 충분히 큰 값은 높이에 맞는 캡슐 형태를 만듭니다.
이번 예제의 출발점은 border-radius: 8px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 네 모서리에 서로 다른 값을 지정하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
텍스트가 많은 상자에 지나치게 큰 반지름을 쓰면 내부 여백과 모양이 어색해집니다.
직접 바꿔보세요네 모서리에 서로 다른 값을 지정하세요.