outline on only 3 borders with box shadow not taking care of border radius

Question

I have following structure

<div class="input-container" data-language="fr-CA">
     <input class="input-arrows" data-min="0" data-max="100">
     <span class="input-symbol">%</span>
     <div>
        <button data-add="10">+</button>
        <button data-add="-10">-</button>
    </div>
</div>

And I would like to apply an outline around the input and the buttons on focus. For this I use following CSS (CSS is applied on the input and the parent div of the buttons)

.with_arrows.input-focus {
    outline: none;
    box-shadow: 0 3px 0 rgba(133, 209, 220, 0.7), -3px 0 0 rgba(133, 209, 220, 0.7), 0 -3px 0 rgba(133, 209, 220, 0.7);
    border-right: none;
}
.buttons-focus {
    box-shadow: 0 3px 0 rgba(133, 209, 220, 0.7), 3px 0 0 rgba(133, 209, 220, 0.7), 0 -3px 0 rgba(133, 209, 220, 0.7);
    border: 1px solid $primary-700 !important;
}

This is the result

How can I fix this to work like an outline effect ?

(for reference, this is the result of an outline around an input)

EDIT:

Adding 4px for the blur radius gives this result. Which is not the wanted result