padding not working on border-ed div

Question

I am trying to put a circle border around a div with a background image. I want the background image to be as big as can be with a 10px padding between it and the border. This image transitions (scaled down) to 50px when user scrolls and the border is removed so it needs to remain a background image that takes up as much space as possible

css

.brand, .brand:visited, .brand:hover {
 display: block;
 position: relative;
 height: 100px; width: 100px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 padding: 10px;
 border: 1px solid #fff;
 border-radius: 50%;
}

Everything works except for the padding. Not sure how to fix it. ALSO, I don't want the background image clipped

Answer 1

The background of an element applies to any padding...unless the background-clip property is changed.

* {
  box-sizing: border-box;
}
.brand {
  margin: 25px auto;
  position: relative;
  height: 100px;
  width: 100px;
  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;
  background-size: 100% auto;
  padding: 10px;
  border: 1px solid red;
  border-radius: 50%;
  background-clip: content-box;
}
.brand:hover {
  padding: 5px;
}

<div class="brand"></div>

Alternative: Use a wide border and a box-shadow for the outer "border".

* {
  box-sizing: border-box;
}
.brand {
  margin: 25px auto;
  position: relative;
  height: 100px;
  width: 100px;
  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;
  background-size: 100% auto;
  box-shadow: 0px 0px 0px 1px red;
  border: 10px solid white;
  border-radius: 50%;
}
.brand:hover {
  border-width: 5px;
}

<div class="brand"></div>