CODEWITHSUNDEEP
htmlcssimagepadding
Wickon
Wickon

Reputation: 13

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">

Upvotes: 1

Views: 51

Answers (2)

Asons
Asons

Reputation: 87191

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>

Upvotes: 4

kamoroso94
kamoroso94

Reputation: 1735

If your problem is that the border-radius isn't taking into account the padding, try using box-sizing: border-box; and see if that makes a difference in how the image is displayed.

Upvotes: -1

Related Questions