CSS3 Border Radius 모서리를 둥글게하는 방법

CSS3의 border-radius 속성을 사용하면 웹사이트 요소의 모서리를 둥글게 만들 수 있습니다.

.

모든 모서리를 둥글게 하려면 border-radius에 값을 한번만 지정합니다.

border-radius의 값을 16px로 지정했습니다.

.

<div style="width: 100px; height: 100px; background-color: green; border-radius: 16px;"></div>

.

모서리를 둥글게 해서 웹사이트 요소를 원의 형태로 보이게 할 수 있습니다.

border-radius의 값을 50%로 지정했습니다.

.

<div style="width: 100px; height: 100px; background-color: green; border-radius: 50%;"></div>

.

위에 보여드린 예제는 모서리 모든 값이 동일할 경우이고, 4개의 모서리에 각기 다른 값을 주거나 2개 (좌측 상단, 우측 하단) 2개 (우측 상단, 좌측 하단) 로 다른 값으로 설정할 수 있습니다.

다음은 4개의 모서리에 각기 다른 값을 설정했습니다. 순서는 좌측 상단부터 시계 방향으로 8px 16px 24px 48px 으로 설정했습니다.

.

<div style="width: 100px; height: 100px; background-color: green; border-radius: 8px 16px 24px 48px;"></div>

가장 크기가 큰 부분이 가장 많이 둥글게 된 것을 확인할 수 있습니다.

.

이번에는 두개의 값만 설정해서 타원형을 만들어 보겠습니다.

border-radius 값으로 120px 30px를 주었습니다.

.

<div style="width: 100px; height: 100px; background-color: green; border-radius: 120px 30px;"></div>

.

또한 모서리 하나 하나에 대한 값을 따로 설정할 수 있습니다.

이 때는 border-radius 속성이 아닌 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 속성을 사용합니다.

border-top-left-radius 속성의 값으로 24px을 주었습니다.

.

<div style="width: 100px; height: 100px; background-color: green; border-top-left-radius: 24px"></div>

.

출처: https://caniuse.com/border-radius

출처: https://caniuse.com/?search=border-top-left-radius

이렇게 CSS3의 border-radius 속성을 사용해서 모서리를 둥글게 하는 방법에 대해서 알아봤습니다.

감사합니다.