Home›Validators›Data›CSS Property Validator

CSS Property Validator

Data

Validate CSS property names against the official W3C/MDN list. Identifies property category and browser support tier. Free, in-browser, no data stored.

What is a CSS Property?

A CSS Property Validator checks whether a CSS property name is a recognised, standard property defined in W3C CSS specifications. When you type background-color, display, or grid-template-columns, the tool confirms that name exists in the authoritative property list, identifies its functional category (Layout, Typography, Flexbox, and so on), and notes whether it is a vendor-prefixed or custom property.

This tool solves a specific everyday problem: CSS property names are long, hyphenated, and easy to misspell. A typo like backgroun-color or dispaly produces no browser error — the declaration is silently ignored. Browsers do not raise exceptions for unknown property names; they simply skip the rule. That silent failure makes name errors harder to catch than syntax errors in most other languages.

The validator covers three distinct cases:

  • Standard properties — checked against the W3C/MDN property list and assigned a functional category
  • Vendor-prefixed properties — names starting with -webkit-, -moz-, -ms-, or -o- are detected and noted separately; use the unprefixed standard form where possible
  • Custom properties — names starting with -- (such as --brand-blue) are valid by CSS specification and are recognised as custom properties; no further name checking applies

Validation runs entirely in your browser. No input is transmitted to any server. For related checks, see the HTML Validator and the URL Validator.

How to use this CSS Property calculator

  1. Open the CSS Property Validator on this page. The CSS Property Name input field is pre-filled with background-color as a working example.
  2. Clear the field and type or paste the property name you want to check — enter the name exactly as it appears in a CSS rule, in lowercase with hyphens (for example, font-size, not fontSize).
  3. The Result badge updates instantly as you type. No button press is required.
  4. If the badge shows Valid, read the category label below it to confirm the property is in the functional area you expected.
  5. If the badge shows Invalid, check for common issues: a typo, a camelCase name instead of hyphenated, a missing or extra hyphen, or a vendor prefix on a property that has a standard name.
  6. To check another property, clear the field and enter the next name. You can also share the current result by copying the URL — the property name is encoded in the page URL and will pre-fill the field for anyone you send the link to.

Formula & Methodology

The validator applies three checks in sequence:

1. Custom property detection

If the input starts with --, it is a CSS custom property. Custom properties are valid by CSS specification for any name following the -- prefix — no further lookup is performed, and the result is returned as valid with a custom property note.

2. Vendor prefix detection

If the input starts with -webkit-, -moz-, -ms-, or -o-, the prefix is recorded. The prefixed name is noted as vendor-specific rather than standard. The tool does not look it up in the standard property list.

3. Known-property lookup

For all other inputs, the name is normalised to lowercase and looked up in the bundled property list derived from the W3C CSS specification and MDN documentation. If a match is found, the associated functional category is returned and the result is valid. If no match is found, the result is invalid.

Valid example — background-color

background-color does not start with -- or a vendor prefix. Lookup finds it in the known-property list under the Background & Colour category. Result: Valid — Background & Colour.

Invalid example — backgroun-color (typo)

backgroun-color does not start with -- or a vendor prefix. Lookup finds no match in the known-property list — the name is missing the d. Result: Invalid — not a recognised CSS property.

The property list is bundled at build time and does not make network requests. Validation is synchronous and runs in under one millisecond for any input length. For checking the structural integrity of a complete HTML document rather than a CSS property name, use the HTML Validator.

Frequently Asked Questions

The tool checks whether the name you enter matches a known, standardised CSS property from the W3C/MDN property list. It returns whether the property is valid, which functional category it belongs to (such as Layout, Typography, or Flexbox), and whether it is a vendor-prefixed or custom property. It does not check the value you would assign to that property — only the property name itself.
A name is valid if it appears in the recognised list of standard CSS properties maintained by the W3C and documented on MDN. This includes longhand and shorthand properties (for example, `border` and `border-top-color`), as well as properties introduced in modern CSS modules such as Grid and Animations. A name that is misspelled, entirely fabricated, or belongs to a proprietary non-standard extension is not valid.
No. This tool validates property names only. Whether a given value — such as `flex`, `1em`, or `rgba(0,0,0,0.5)` — is acceptable for a specific property is a separate concern and is not checked here. Name validation is the first step; value correctness and browser compatibility checking are independent tasks.
Vendor-prefixed properties are CSS properties that start with a browser-engine prefix: `-webkit-`, `-moz-`, `-ms-`, or `-o-`. These were introduced by browser vendors during the experimental phase of new CSS features before those features were standardised. Examples include `-webkit-text-stroke` and `-moz-appearance`. This tool detects the prefix and notes it, but vendor-prefixed names are not treated as standard validated properties — you should always use the unprefixed standard equivalent where it is supported.
Custom properties (also called CSS variables) are user-defined properties that start with two hyphens, such as `--primary-color` or `--spacing-unit`. They are valid CSS by specification and can hold any value, which is then referenced using `var(--property-name)`. Because any name starting with `--` is valid by definition, this tool recognises them as custom properties and returns a valid result with a note. It does not validate the name beyond the `--` prefix.
No. This is a name-format and known-property check, not a browser compatibility audit. Whether a given property works in a target browser depends on the browser's rendering engine version, not the property name alone. For browser support data, consult the MDN compatibility tables or caniuse.com. This tool confirms the property name is correct; compatibility checking is a separate step.
No. The entire validation runs in your browser. The CSS property list is bundled with the page, and the lookup is performed locally using JavaScript. No property name, no session data, and no usage information is transmitted to any server. You can safely use this tool on private or internal property names.
The most common reason is a typo — CSS property names use hyphens between words and are case-sensitive in some parsing contexts (though browsers normalise to lowercase). For example, `backgroundColor` (camelCase) is the JavaScript DOM style property, not a CSS property name; the CSS version is `background-color`. Check the spelling and hyphenation carefully. A second reason is that the property may be a vendor-prefixed variant rather than the standard name.
Each property in the known-property list is tagged with a category based on its primary function: Layout (positioning, display, float), Typography (font, text, line-height), Box Model (padding, margin, border, width, height), Background & Colour, Flexbox, Grid, Animation & Transition, Transform, or Other. The category is informational — it does not affect validation. Properties that span multiple functions are assigned to their primary module.
Yes. Shorthand properties like `background`, `border`, `margin`, `padding`, `font`, and `transition` are all in the recognised property list and will validate correctly. There is no difference in how the tool treats shorthands versus longhands — both are checked against the same list.
A CSS linter (such as Stylelint) analyses a complete CSS file or ruleset — checking property names, value correctness, specificity issues, ordering conventions, and code style rules. This tool validates a single property name in isolation. It is useful for a quick spot-check when you are unsure of the exact spelling of a property name, or to confirm a property exists before you look up its syntax. For full stylesheet quality checks, use a dedicated CSS linter.
This tool validates standard CSS property names as they appear in a stylesheet, using hyphen notation (for example, `font-size`). CSS-in-JS libraries like styled-components or Emotion accept both the CSS hyphenated form and the JavaScript camelCase form (such as `fontSize`). This tool validates only the CSS form. If you are working in a CSS-in-JS context, convert camelCase to hyphenated form before checking here.
Also known as
CSS property checkvalid CSS propertyCSS property name validatorcheck CSS propertyCSS style validator