js左上边框颜色出现错误

想问一下在事件发生的时候为什么边框左边和上边颜色会不一样？
事件发生前

img


事件发生后

img


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
    <style>
        .ipt {
            color: #999999;
            outline: none;
        }
        .pink {
            border-color: #f8d8db;
            color: black;
        }
        .formal_color {
            border-color: #4f4f4f;
        }
    style>
<body>
    <input type="text" value="请输入内容" class="ipt"> 
    <script>
        var input = document.querySelector('.ipt');
        input.onfocus = function(){
            this.value = ''; 
            this.className = 'pink ipt'
            
        }
        input.onblur = function(){
            if (this.value==='') {
                this.value = '请输入内容';
                this.style.color = '#999999';
            }
        }
    script>
body>
html>

input默认的border-style是inset,也就是3d样式，所以看上去颜色不一样
在css中改为border-style:solid就可以了