Stylish HTML Textboxes

If you want a nice border around your focused html textboxes, simply use the following CSS style:

input
{
    border:1px solid #ccc;
    padding:4px 4px;
    line-height:20px;
    min-height:20px;
    font-size:13px;
    
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    
    transition:border linear .25s, 
            box-shadow linear .25s;
    -webkit-transition:border linear .25s,
            box-shadow linear .25s;
    -moz-transition:border linear .25s,
            box-shadow linear .25s;
    
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);

    background-color:#F9F9F9;
}

input:focus
{
    border-color:#09c;
    border-color:rgba(0,135,200,0.75);
    
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),  
                 0 0 8px rgba(81,169,236,0.66);    
    -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),
                 0 0 8px rgba(81,169,236,0.66);
    -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),
                 0 0 8px rgba(81,169,236,0.66);
    
    outline:none;
}