Text Input with rounded corners

Submitted by:Jhon Jhon

Date added:06 March, 2013

Category:CSS

This example code shows how to make text inputs with rounded corners.

Tags: rounded corners

Code Snippet:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A nice Text Box</title>
<style>
body * {
font-family: Georgia, 'Times New Roman', Times, serif;
font-style: italic;
}

label.rounded {
padding-top: 5px;
font-weight: bold;
color: #555;
}

input.rounded {
border: 0;
background: url(http://img181.imageshack.us/img181/53/textroundbv8.gif) top left no-repeat;
width: 190px;
height: 25px;
padding: 3px 5px;
font-size: 85%;
color: #399;
}
</style>
</head>

<body>
<label class="rounded">My Input:</label>
<input class="rounded" type="text" value="Some text..." />
</body>
</html>
 
 

Comments