allora, così mi funziona bene,

solo che ora volevo sapere se c'è un sistema migliore per ottenere lo stesso effetto usando meglio i css.

nel sito http://www.htmldog.com/ credo che usano un mix di css e jscritp

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
.input_blur {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #333333;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #333333;
}

.input_focus {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFCA;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #333333;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #333333;
}

-->
</style>
</head>

<body>
<form name="form1" method="post" action="">
  <input name="nome" type="text" id="nome" onfocus="this.className='input_focus'" onblur="this.className='input_blur'" >
</form>
</body>
</html>