Forms & CSS

How to style HTML forms with CSS (Beginner's Guide)

Learn the fundamental CSS properties used to make default browser forms look clean, modern, and professional.

April 19, 2026 · 5 min read · MyFormConnect

Applying CSS properties to HTML forms — Default browser inputs can look very different on Mac vs Windows. CSS ensures your forms look consistent everywhere.

By default, standard HTML forms (inputs, textareas, buttons) look exactly as the browser wants them to. An input field on Chrome for Windows looks different than on Safari for Mac.

To create a consistent, branded experience, you need to apply Custom CSS. Here are the core concepts you need to know.

1. Resetting the box-sizing

The single most important CSS rule for forms is setting box-sizing: border-box;. This ensures that adding padding or borders to an input field won't cause it to overflow its container.

input, textarea, select {
  box-sizing: border-box;
  width: 100%;
}

2. Styling Inputs and Textareas

Inputs need three things to look good: padding (breathing room inside the box), a subtle border, and rounded corners.

input[type="text"],
input[type="email"],
textarea {
  padding: 12px 16px;
  border: 1px solid #d1d5db; /* Light gray border */
  border-radius: 6px; /* Slightly rounded corners */
  font-size: 16px; /* Prevents auto-zoom on iPhones */
  color: #111827; /* Dark text */
  background-color: #ffffff;
}

/* Add a nice outline when the user clicks/focuses the input */
input:focus, textarea:focus {
  outline: none;
  border-color: #3b82f6; /* Blue border */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* Soft blue glow */
}

3. Styling Labels

Labels should be clearly associated with their inputs. Making them display: block puts them on their own line above the input.

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
}

4. Styling the Submit Button

Buttons should look clickable. A solid background color, white text, and a hover effect do the trick.

button[type="submit"] {
  background-color: #2563eb; /* Primary blue */
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button[type="submit"]:hover {
  background-color: #1d4ed8; /* Darker blue on hover */
}

The Result

When you put all of these styles together on a standard HTML form, you go from an ugly, inconsistent browser default to a sleek, modern UI component.

For fully styled, copy-pasteable examples of full forms, check out our guides on creating a contact form or a registration form.