Trying to round an image with border-radius and failing

Trying to round an image with border-radius and failing
0

#1

Hello friends,

This rounding technique worked in the challenge no problem. I am trying to round a little image on my portfolio page (black terminal image) and can’t seem to get it to work.

This is the class i created:

 .img-round {
   width: 100px;
   border-radius: 50%;
   border-color: white;
    }

and its being used here:

<img class="img-round"  
src="https://cdn1.macworld.co.uk/cmsdata/features/3608274/Terminalicon2_thumb800.png">

The link to my pen: Pen

If you’d like to include come feedback on the design of my portfolio page (still under construction) please do. Any suggestions to my sloppy code layout would be appreciated as well.

Thanks for your time


#2

The problem is the image itself. It has a transparent section surrounding the part you actually see.

Put a red background into the class, so you can see what is happening:

 .img-round {
   width: 100px;
   border-radius: 50%;
   border-color: white;
   background-color: red;
 }

EDIT: If you want to see the whole transparent section around the image, remove the border related proeprties:

 .img-round {
   background-color:red; // fills in transparent section with red
   width: 100px;
 }

image


#3

It is working. You can see it if you change the background color.

41 AM

edit: A photo finish with @randelldawson in the lead!


#4

Thanks for the replies. Transparent background!!! Makes total sense now.