How to select element that does not contain class

Check Your Syntax

Ensure that your class attribute selector is contained within square braces to avoid any syntax issues.:

input:not([class^="border-radius"]) {
   /* Your style here */
}

Handling Multiple Classes

Additionally, if you expect to contain multiple classes, you might want to consider using the contains selector *= instead as the previous approach will only work if the first class attribute starts with "border-radius" :

input:not([class*="border-radius"]) {
   /* Your style here */
}

Examples

This is an example demonstrating the starts-with ^= selector.

input { margin: 10px}

input:not([class^="border-radius"]) {
  background: yellow;
}

<input class='border-radius' />
<input class='normal' />
<input class='test border-radius' />
<input class='another-normal' />
<input class='border-radius-5' />

This is an example demonstrating the contains *= selector.

input { margin: 10px}

input:not([class*="border-radius"]) {
  background: yellow;
}

<input class='border-radius' />
<input class='normal' />
<input class='test border-radius' />
<input class='another-normal' />
<input class='border-radius-5' />

Try input:not([class^="border-radius"]) instead. Attribute selectors are written inside square brackets [].

input:not([class^="border-radius"]) {
  background: blue;
}

<input type="text">
<input type="text" class='border-radius'>
<input type="text" class='border-radius-something'>