x
<html><head><style>#img1 { clip-path: circle(50%);}#img2 { clip-path: circle(40%);}#img3 { clip-path: circle(60%);}</style></head><body><h1>The circle() Function</h1><p>clip-path: circle(50%):</p><img id="img1" src="pineapple.jpg" alt="Pineapple" width="300" height="300"><p>clip-path: circle(40%):</p><img id="img2" src="pineapple.jpg" alt="Pineapple" width="300" height="300"><p>clip-path: circle(60%):</p><img id="img3" src="pineapple.jpg" alt="Pineapple" width="300" height="300"><p>Original image:</p><img src="pineapple.jpg" alt="Pineapple" width="300" height="300"></body></html>