<!DOCTYPE html>
<body>
<input id=text1 style="box-sizing:border-box; width:100px; text-align:right;" value="Hello world">
<input id=text2 style="box-sizing:border-box; width:100px; text-align:right;" placeholder="Hello world">
<input id=text3 style="box-sizing:border-box; width:100px; text-align:right;" value="Hello world">
<input id=text4 style="box-sizing:border-box; width:100px; text-align:right;" placeholder="Hello world">
<script>
document.body.offsetLeft;
document.getElementById('text1').style.paddingLeft = '40px';
document.getElementById('text2').style.paddingLeft = '40px';
document.getElementById('text3').style.borderLeftWidth = '40px';
document.getElementById('text4').style.borderLeftWidth = '40px';
</script>
</body>