HTML에서 동그란 이미지(Rounded Image) 만들기

안녕하세요

HTML에서 아래 결과물과 같이 일반적인 정사각형의 이미지를 동그란 이미지로 만드는 법을 알아보겠습니다.

정말 간단합니다 ^^;

 

 

Step 1) HTML에 이미지 tag를 추가하여 이미지를 위치시킵니다.

<img src="img_avatar.png" alt="Avatar"> 

 

Step 2) CSS 편집

border-radius 속성을 이용하여 이미지의 코너에 곡선을 줍니다.

border-radius 속성을 50%하면 동그란 원이됩니다.

img {
  border-radius: 50%;
}

 

 

결과

 

끝!

 

 

 

출처 : W3School / HOW TO : How to - Rounded Images