Border-radius property not working - html

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.
Only the border-radius doesn't work. I'm getting squares instead of circles.
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

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>

Answer 3

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%;
}