Round form corner : moz border « IE Firefox « HTML / CSS






Round form corner

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
        <style type="text/css">
            h1 {
                font-size: 18pt;
                padding: 5px;
                border-bottom: 5px dashed #fff;
                letter-spacing: -2px;
                -moz-border-radius-topleft: 10px;
                -moz-border-radius-topright: 10px;
            }
            form {
                background: #aaa;
                padding: 10px;
                -moz-border-radius-bottomleft: 10px;
                -moz-border-radius-bottomright: 10px;
            }
            form h2, form label {
                font-size: 11pt;
                -moz-border-radius: 10px;
                padding: 3px;
            }
            div input, div textarea {
                margin: 3px;
                padding: 4px;
                background: #ccc;
                font-weight: bold;
                -moz-border-radius: 10px;
                color: black;
            }
            input#button {
                background: black;
                font-weight: bold;
                -moz-border-radius: 10px;
                color: white;
            }
        </style>
        <title>Feedback Form</title>
    </head>
    <body>
        <h1>Header 1</h1>
        <form>
            <h2>This is the title.</h2>
            <div>
                <label for='feedback[name]'>Name:</label>
                <input type='text' size='25' name='feedback[name]' />
            </div>
            <div>
                <label for='feedback[email]'>Email:</label>
                <input type='text' size='25' name='feedback[email]' />
            </div>
            <div class='spanform'>
                <label for='feedback[message]' class='spanform'>Comments:</label>
                <textarea name='feedback[message]' cols='40' rows='6' wrap='virtual'></textarea>
            </div>
            <div id='buttons'>
                <input type='submit' name='feedback[action]' value='Submit' id='button' />
            </div>
            <div id='copyright'>
                &copy; Copyright 2008, All Rights Reserved.
            </div>
        </form>
    </body>
</html>

 








Related examples in the same category

1.Round corner in Firefox