Wickon Wickon - 4 months ago 11
HTML Question

Image displaying wrong

I want to create some neat circular buttons for a user interface, but I can't use divs because the links won't work then.

I've got a rounded image with the border-radius property, which is 50 pixels wide and tall. The dimensions of the image inside was decreased to 30 pixels to look nicer, and a 10 pixel padding was brought in to make a total of 50 pixels, not counting the border.

However, I want the border-radius applied only on the border, and not the image within. Is there any way to get around this problem w/o the use of a div?

CSS



img.userinterface {
width: 30px;
height: 30px;
padding: 10px;
background: #fff;
border: 3px solid #ddd;
border-radius: 50%;}


A basic html if you want to check it out:

HTML



<img class="userinterface" src="xyz">

Answer

Why the extra img when you can make the link round as is

a {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 10px;
  background: #fff url(http://lorempizza.com/100/100/) center center;
  border: 3px solid #ddd;
  border-radius: 50%;
}
a:hover {
  border-color: green;
}
<a href="#"></a>