<style>
input:in-range {
border: 1px solid blue;
}
</style>
<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>
The :in-range
CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits.[1]