5

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;
}
Laighlin
  • 53
  • 1
  • 5

3 Answers3

5

use outline, insted of broder.

#f {
  width: 100px;
  padding: 15px;
  background: #eee;
  border-radius: 10px;
  color: Grey;
  text-align: center;
  outline: 2px solid silver;
  transition: .1s linear;
  cursor: pointer;
}

#f:hover {
  outline: 5px solid #fb0;
  transition: .1s linear;
}
<div id="f">Button</div>

New Edit 2022: border-radius will work with outline in 2022

Old Edit: Ok it seems my mistake, border-radius won't work outline. outline is fine for square boxes.

There is a -moz-outline-radius but only for mozilla firefox. box-shadow is another way but it is tricky to use it for thick borders.

In this case instead of outline use LGSon's box-sizing:border-box solution.

AvikB
  • 395
  • 2
  • 12
  • This won't work as `outline` doesn't follow the `border` when having `border-radius`. – Asons Mar 14 '16 at 13:29
  • 1
    @LGSon thaks, i completely forgot about it :S i have updated the answer pointing to your solution. – AvikB Mar 14 '16 at 13:53
3

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>
Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
3

Answer from 2022:

@AvikB 's answer is correct.

Outline is worked with border-radius now in 2022.

Here is the gist:

#f {
  width: 100px;
  height: 20px;
  background: blue;
  border-radius: 10px;
  color: white;
  text-align: center;
}

#f:hover {
  outline: 2px solid red;
}
<div id="f">button</div>

As you can see, outline is much better than border in case it doesn't change the box size.

Hhacker
  • 31
  • 4