how can i increase border width on hover without dislodging the div position in css?

Question

i'm trying to have it so that hovering on a circular div causes a thick dotted border to radiate outwards while keeping the inner area in the same place. (the idea is to give the impression of a blooming flower.) so far everything i've tried has resulted in the center moving to accomodate the increase in border width. is there a way to accomplish what i want with pure css?

this is what i'm using:

#f {
    left:10px;
    top:10px;
    position:fixed;
    border:10px dotted #0db;
    border-radius:50%;
    width:43px;
    height:43px;
    -webkit-transition: border .4s ease-in;
    -moz-transition: border .4s ease-in;
    -o-transition: border .4s ease-in;
}

#f:hover {
    border:40px dotted #fb0;
}

Answer 1

The simplest would be to set box-sizing: border-box; and increase the elements size with the border's now set width.

Since box-sizing: border-box; make border width within the size of the element, it will keep its size on a border resize.

Side notes:

Don't forget to add the non-prefixed transition: border .4s ease-in; to your rule.

Be also aware of that dotted borders in Firefox and Edge/IE11 doesn't look the same as in Chrome.

FF doesn't show it at all actually, Dashed border not showing in firefox

#f {
  left:10px;
  top:10px;
  position:fixed;
  box-sizing: border-box;
  border:10px dotted #0db;
  border-radius:50%;
  width:53px;
  height:53px;
  -webkit-transition: border .4s ease-in;
  -moz-transition: border .4s ease-in;
  -o-transition: border .4s ease-in;
  transition: border .4s ease-in;
}

#f:hover {
  border: 20px dotted #fb0;
}

<div id="f"></div>