CSS Form Styling

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Form Styling properties are used to improve the appearance of HTML forms and their elements.

By default, form elements such as text fields, buttons, and textareas have basic browser styling. CSS allows you to customize them to create modern, user-friendly forms. The supporting concepts are explained in Modern Form Styling and CSS User Interface.

Form styling is commonly used for:

Contact forms
Login forms
Registration forms
Search forms
Feedback forms

Syntax

CSS Form Styling Syntax

css

selector {
    property: value;
}

PreviousCSS Tables NextCSS Input Fields

form {
    background-color: #f5f5f5;
    padding: 20px;
}

Property	Description	Example
width	Sets form width	width: 400px;
padding	Adds inner spacing	padding: 20px;
border	Adds border	border: 1px solid #ccc;
border-radius	Creates rounded corners	border-radius: 5px;
background-color	Sets form background color	background-color: #f9f9f9;

CSS Form Styling Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Form Styling Example</title>
    <style>
        form {
            width: 400px;
            padding: 20px;
            border: 1px solid #cccccc;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input,
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #cccccc;
            border-radius: 4px;
        }
        button {
            background-color: #007acc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #005f99;
        }
    </style>
</head>
<body>
    <form>
        <label for="name">Name</label>
        <input type="text" id="name">
        <label for="email">Email</label>
        <input type="email" id="email">
        <label for="message">Message</label>
        <textarea id="message"></textarea>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

css

A styled form with a light background will appear
Input fields will have borders and padding
Labels will appear above each field
The submit button will have a blue background
The button color will darken when hovered

Element	Purpose
`<form>`	Form container
`<input>`	User input field
`<textarea>`	Multi-line text input
`<select>`	Dropdown list
`<button>`	Form action button

CSS Form Styling

Syntax

Attributes

Example

Output

Browser Output

Browser Support

Notes

Commonly Styled Form Elements

Conclusion