Border um mehrer Buttons

Code:
<!doctype html>

<html>



<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <title>Border bei Buttons</title>

    <meta charset="utf-8">

    <style>

body{

    text-align:center;

}





#but{

  display:inline-block;

  margin-top:10%;

}

.butto{

  margin-left:-4px;

  padding:0;

  padding:20px 40px 20px 40px;

}

input:first-child{

  border:2px solid red;

}

input:nth-child(2),

input:nth-child(3),

input:nth-child(4),

input:nth-child(5){

    border-top:2px solid red;

    border-bottom:2px solid red;

    border-right:2px solid red;

}



 



    </style>

</head>

<body>

<div id="but" class="buttons">

    <input type="button" class="butto" id="bu1" value="Button 1"> 

    <input type="button" class="butto" id="bu2" value="Button 2"> 

    <input type="button" class="butto" id="bu3" value="Button 3">

   <input type="button" class="butto" id="bu4" value="Button 4"> 

    <input type="button" class="butto" id="bu5" value="Button 5"> 

</div>

</body>



</html>