BLOGGER: ADD A CUSTOM SEARCH BOX PART III

In this post I will teach how to make the corners of the expandable search boxes I posted in the second part of the tutorial. We just need to insert a few codes and when we're done they should look like these:

Codes needed to make the corners rounded

 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 5px;  

SO WHERE TO INSERT THEM?
Insert them within the CSS code specifically before each curly bracket you see. For example:

 #search1 input{  
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqkslmDw9lQNl21Qv_ULNiLYTKuWO2VJeaKKskKx3PPTQqiG5gFHRdKtiSxZka4Ti1SjLBZXCHcC_rEE1OwWeX6gOfZG_YDPR4MbL1EPLtAmiyHkiuXk8twNrv9Khcp9oLqXbshCK0dRY/s20/black.png) no-repeat 8px 4px #ffffff;  
 border: 2px solid #000000;  
 font: bold 12px calibri, serif;  
 color: #000000;  
 width: 160px;  
 padding: 5px 15px 5px 30px;  
 -webkit-transition: all 0.5s ease 0s;  
 -moz-transition: all 0.5s ease 0s;  
 -o-transition: all 0.5s ease 0s;  
 transition: all 0.5s ease 0s;  
 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 5px;  
 }  
 #search1 input:focus {  
 width: 200px;  
 outline: none;  
 border: 2px solid #777777;  
 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 5px;  
 }  
 </style>  
 <form action='/search' id='search1' method='get'>  
 <input name='q' placeholder='Search Tweak Peek' size='40' type='text'/>  
 </form>  

So that's all you need to do to make the corners of your search box rounded!

NEED SEARCH ICONS FOR THIS SEARCH BOX IN DIFFERENT COLORS? CLICK HERE!