HTML CSS

ROUNDED IMAGES USING PURE CSS

(quick guide & examples)

50% BORDER RADIUS img.round { border-radius:50%; }   IMAGE NEEDS TO BE SQUARE OR WILL TURN INTO OVAL <img src="SQUARE.JPG" class="round">

ROUNDED IMAGE

01

div.round {    SQUARE DIMENSIONS   width: 200px; height: 200px;   BACKGROUND IMAGE   background-image:url("IMG.JPG");   50% BORDER RADIUS   border-radius:50%;    REPOSITION IF NECESSARY   background-position: 70% 50%; }   <div class="round'></div>

ROUNDED BACKGROUND

02