HTML/CSS – Create a glowing border around an Input Field

--> (Word)

--> (PDF)

--> (Epub)

SCENARIO

I want to create some decent inputs for my form, and I would really like to know how TWITTER does their glowing border around their inputs.

I also don't quite know how to create the rounded corners :-/

SOLUTION (1)

Here you go:

input {
 border:2px solid #dadada;
 border-radius:7px;
 font-size:20px;
 padding:5px; 
}

input:focus { 
 outline:none;
 border-color:#9ecaed;
 box-shadow:0 0 10px #9ecaed;
}

SOLUTION (2) by HeelpBook Staff

If you want a better compatibility through multiple browsers and even an HOVER effect (when mouse is over your input form) you could use the following code:

input { 
border:2px solid #dadada;    
border-radius:7px;

font-size:20px;    
padding:5px;     
}


input:focus {  
outline:none;    
border-color:#9ecaed;

box-shadow:0 0 10px #9ecaed;
-moz-box-shadow: 0px 0px 4px #9ecaed;
-webkit-box-shadow: 0px 0px 4px #9ecaed;
}

input:hover { 
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
-moz-box-shadow: 0px 0px 4px #9ecaed;
-webkit-box-shadow: 0px 0px 4px #9ecaed;
}