change border-style in :hover state in Firefox


I have problem with apply border-style change in Firefox. My code:

    position: relative;
    background: #fff;
    display: inline-block;
    margin: auto;
    height: 45px;
    line-height: 40px;
    font-weight: bold;
    width: 45px;
    border: 3px solid;
    border-radius: 50%;
    text-align: center; 
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
#wizardRow>div:hover .wizardCircle{
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-style: dotted;

The problem exist only in FF. I tried to use border: 3px dotted insted border-style and also !important but this also not working. CSS transform working in all browsers. HTML structure:

  <div id="wizardRow" class="row">
      <div class="col-xs-2 wizardCompleted">
          <a href="#"><span class="wizardCircle"><span class="glyphicon glyphicon-ok"></span></span></a>
          <a href="#"><span class="wizardDesc">Tekst</span></a>
Problem courtesy of: LJ Wadowski


Unfortunately you can't do that as it's an open bug in Firefox:

Bug report

If you remove the border-radius it will work proper.

Solution courtesy of: enyce12


Your border-radius makes that the dotted border disappear.

You can see better on this fiddle.

#wizardRow>div:hover .wizardCircle{
    border-radius: 25%;

If you put an small value, it will be possible to see the changes happening.

Actually this happen because your circle is all radius, when you say that your box will have border-radius: 50%, you're saying that each corner will take 50% of the border. Then there's no remaining space to the border be displayed. So what is happening is that the border-style property doesn't affect the border-radius space.

The reason for that is a bug in the way that Firefox render the border-radius property.

Discussion courtesy of: Eliezer Bernart

This recipe can be found in it's original form on Stack Over Flow.