How to make the image also have rounded corners?

Question

I've been trying to make the image's corner also be rounded but when I apply border-radius on the div, the image corner dosen't change at all.

 #bredband { height: 330px; width: 300px; position: relative; background-color: #9099A2; margin: 20px; float:left; border-radius:10px; } 

 <div id="bredband"> <img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Corinex_Router.jpg" width="300" height="200"> <h3>Bredband</h3> <p>hello world</p> </div> 

Answer 1

Add overflow: hidden; to your #bredband selector. That should clip the top corners.