Border-radius property not working

Question

Here is the code:

HTML:

<div class="connectContainer">
    <div class="outerCircle">
        <div class="innerCircle">
            <div class="imgDiv">
                <img class="connectLink" src="car.png">
            </div>
        </div>
    </div>
</div>

CSS:

.connectContainer {
    position:relative;
    height:200px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
    margin-top:30px;
}

.imgDiv {
    width:150px;
    height:150px;
    position:absolute;
}

.connectLink {
    position:absolute;
    height:67px;
    width:110px;
    top:41px;
    left:20px;
}

.innerCircle {
    position:absolute;
    border:2px solid #43cee6; 
    width:150px; 
    height:150px; 
    border-radius:100%;
    left:20px;
    top:20px;
    -webkit-animation-name: changeInnerBorderColor;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;

}

.outerCircle {
    position:absolute;
    border:2px solid #43cee6; 
    width:190px; 
    height:190px; 
    border-radius:100%;
    margin:0 auto;
    -webkit-animation-name:changeOuterBorderColor;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count: infinite;
}

I'm using Google Chrome Version 47.0.2526.73 (64-bit). All the animation and other properties are working absolutely fine. I tried changing the border-width and it changes as well.

Also, the ionic version of this code for a mobile app gives me the circles!

Please help.

Answer 1

• For making any circle you have to change your border-radius property 50% then it will works as circle.

Your .innerCircle and .outerCircle class exists with 100% of border radius value change it to 50% for getting circle.

.innerCircle {
position:absolute;
border:2px solid #43cee6; 
width:150px; 
height:150px; 
border-radius:50%;
left:20px;
top:20px;
-webkit-animation-name: changeInnerBorderColor;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;

}

.outerCircle {
position:absolute;
border:2px solid #43cee6; 
width:190px; 
height:190px; 
border-radius:50%;
margin:0 auto;
-webkit-animation-name:changeOuterBorderColor;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: infinite;
}

Answer 2

Try This in your code to get proper output. you can change top,left,width,height according to your requirement.

.connectContainer {
    position: relative;
    height: 200px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
.outerCircle {
   position: absolute;
    border: 2px solid #43cee6;
    width: 190px;
    height: 190px;
    border-radius: 100%;
    margin: 0 auto;
    -webkit-animation-name: changeOuterBorderColor;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
.innerCircle {
    position: absolute;
    border: 2px solid #43cee6;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    left: 20px;
    top: 20px;
    -webkit-animation-name: changeInnerBorderColor;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
.imgDiv {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 10px;
}
.connectLink {
    position: absolute;
    height: 110px;
    width: 110px;
    top: 20px;
    left: 20px;
    border-radius: 100%;
}

Answer 3

This is your fiddle http://jsfiddle.net/7xewv0f5

I see it works normally. Try inspect elements to find other css which is overwriting your border-radius

<div class="connectContainer">
    <div class="outerCircle">
        <div class="innerCircle">
            <div class="imgDiv">
                <img class="connectLink" src="car.png">
            </div>
        </div>
    </div>
</div>