CSS에서 블록 테두리 둥글게 만들기
지금부터 우리는 블록의 모서리를
둥글게 만드는 방법을 배울 것입니다.
이를 위해서는 픽셀 단위의 값을 받는
속성 border-radius를 사용해야 합니다.
예를 들어 10px와 같은 둥글림 값을 지정했다는 것은 무엇을 의미할까요?
이는 이 둥근 모서리에 내접할 수 있는 원의 반지름입니다.
수학과 친하지 않고 마지막 문장이 이해가 되지 않는다면
그냥 잊어버리고 눈으로 둥글림 값을 조절하면 됩니다.
약간의 경험이 있다면 문제없이 할 수 있습니다 (둥글림을
측정하는 측정 도구는 존재하지 않습니다,
적어도 저는 들어본 적이 없습니다).
블록의 둥글림 값을 10px로 설정하여 모서리를 둥글게 만들어 봅시다:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
다음 예시와 동일한 페이지를 만들어 보세요:
