Element style changing automatically when computed

I have a common class for checkboxes and their labels. I used them in two different pages, one of them is rendering perfectly while the other one is missing 2 properties (checked tick color and border radius).

Here is my style

input[type="checkbox"], input[type="radio"] {
vertical-align: middle;
display: inline-block;
margin: 2px 2px 2px 2px;
outline-style: none;

&:checked {
  box-shadow: 0 0 0px 10px fade(@color-interactive, 10%);
  border-radius: 20px;
}
&:hover {
  .hover-bg;
  box-shadow: 0 0 0px 10px fade(@color-interactive, 10%);
  border-radius: 20px;
}

}

Usage 1 (redenring perfectly):

<div class="form">
<strong>Choices</strong>
<label class="inline"><input type="checkbox" checked> Item 1</label>
</div>

Usage 2 (missing properties):

<div class="page-width email-preferences-container form">
<?php if($m->loggedin) { ?>
    <a class="act btn btn-sec" href="/page/"><span class="icon-left-big"></span>   BACK TO MY ACCOUNT</a>
<?php } ?>
<h1>
    Prefs <?= $m->email; ?>
</h1>

<form class="internal-form">
    <div class="ops">
        <h3>Yay!</h3>
        <?php foreach($m->preferences->Overrides as $name => $value) : ?>
            <?php if(array_key_exists($name, $m->preferences->OverrideDisplayNames)) : ?>
                <label class="inline">
                    <input id="<?= $name ?>" type="checkbox" name="<?= $name ?>" class="prefs" <?= $value ? 'checked="checked"' : ''?>>
                    <?= $m->preferences->OverrideDisplayNames[$name] ?>
                </label>
            <?php endif ; ?>
        <?php endforeach ?>
    </div>
</form>
</div>

After checking in the console, I see that everything is the same in Styles tab but in Computed tab, the border-radius is 0px instead of 30px