Ion-radio border-radius issue

ionic-v1
1

Hey guys!

I am having some issues with the ion-radio. I am currently trying to add some border-radius to the ion-radio which works but not on all corners.

/** * Radio Button Inputs * -------------------------------------------------- */ $color-nirvana-radio : #00a4ad;

.item-radio {
padding: 0;
&:hover {
cursor: pointer;
}
}

.item-radio:nth-child(1){
border-radius: 10000000rem 0rem 0rem 1rem;
-moz-border-radius: 10000000rem 0rem 0rem 1rem;
-o-border-radius : 1000000rem 0rem 0rem 1rem;
-webkit-border-radius: 100000rem 0rem 0rem 1rem;
}

.item-radio:nth-child(3){
border-radius: 0px 10px 0px 10px;
}

As you can see I have tried a few things and nothing works. So the corner top left for the first item-radio doesn’t move one bit as much as for the lower right for the third one!

Thank for your help in advance.

2

I found how. Simply by adding !important at the end of each border radius attribute.

like this :

border-radius: 1rem 0rem 0rem 1rem !important; -moz-border-radius: 1rem 0rem 0rem 1rem !important; -o-border-radius : 1rem 0rem 0rem 1rem !important; -webkit-border-radius: 1rem 0rem 0rem 1rem !important;
3

I think everybody should read and really internalize this piece before ever using !important.