HTML Guides for border-radius

The border-radius property controls the rounding of an element's corners. Its valid values include lengths (e.g., 5px, 1em), percentages (e.g., 50%), and CSS-wide keywords like inherit, initial, and unset. Unlike many other border-related properties, border-radius has no none keyword in its value syntax.

This confusion typically arises because developers associate "no effect" with the keyword none, which works for properties like border: none or text-decoration: none. However, border-radius describes a geometric measurement — the radius of the corner curve — so "zero radius" (0) is the correct way to express no rounding.

Using an invalid value means the browser will ignore the entire declaration. This can lead to unexpected results: if a parent stylesheet or an earlier rule sets a border-radius, your none declaration won't override it, and the element will retain its rounded corners. Fixing this ensures your CSS is standards-compliant, behaves predictably across browsers, and passes W3C validation.

How to fix it

• To remove rounding, replace none with 0.
• To set a specific radius, use a valid length (5px, 0.5em), a percentage (50%), or a CSS-wide keyword (inherit, initial, unset).
• The same rule applies to the longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

Examples

Incorrect: using none

<style>

.box{

border-radius: none;/* "none" is not a valid border-radius value */

}

</style>

<divclass="box">Content</div>

Correct: removing rounded corners with 0

<style>

.box{

border-radius:0;

}

</style>

<divclass="box">Content</div>

Correct: applying a specific radius

<style>

.circle{

width:100px;

height:100px;

border-radius:50%;

}

.rounded{

border-radius:8px;

}

.pill{

border-radius:9999px;

}

</style>

<divclass="circle">Circle</div>

<divclass="rounded">Rounded</div>

<divclass="pill">Pill shape</div>

Correct: resetting to the initial value

If you need to undo a border-radius set by another rule, you can use initial or unset, both of which resolve to 0:

<style>

.card{

border-radius:12px;

}

.card.sharp{

border-radius: initial;/* Resets to 0 */

}

</style>

<divclass="card">Rounded card</div>

<divclass="card sharp">Sharp-cornered card</div>

The border-radius property accepts one to four values, each of which must be a valid <length> or <percentage>. You can also specify elliptical corners using a / separator with up to four values on each side. Any value that falls outside this syntax — such as a bare number without a unit, a misspelled keyword, a negative value, or a var() reference the validator can't resolve — will trigger this error.

Here are the most common reasons this error appears:

• Missing units: Writing border-radius: 10 instead of border-radius: 10px. CSS requires explicit units for all non-zero length values.
• Invalid keywords: Using a keyword like border-radius: large that isn't part of the CSS specification.
• Negative values: The border-radius property does not accept negative lengths or percentages.
• Unresolvable var() references: The W3C validator performs static analysis and cannot evaluate CSS custom properties. If you use var(--my-radius) in an inline style attribute, the validator has no way to confirm the variable holds a valid value, so it flags it as an error.
• Malformed shorthand: Incorrect use of the / separator or too many values, such as border-radius: 10px 5px / 20px 15px 10px 5px 3px.

This matters for standards compliance and cross-browser consistency. While browsers are generally forgiving and will ignore invalid property values, this means the style silently fails — your element won't get the rounded corners you intended. Catching these errors during validation helps prevent subtle visual bugs.

How to fix it

1. Add units to any bare numeric values (except 0, which doesn't need a unit).
2. Remove negative values — use 0 as the minimum.
3. Check shorthand syntax — you can provide one to four values, optionally followed by / and one to four more values for elliptical radii.
4. Replace unresolvable var() references with static values for validation purposes, or move them into a <style> block where the custom property is defined (though the validator may still flag var() usage).
5. Use valid units such as px, em, rem, %, vw, etc.

Examples

Invalid: missing unit on a non-zero value

<divstyle="border-radius:10;"></div>

Fixed: adding the correct unit

<divstyle="border-radius:10px;"></div>

Invalid: negative value

<divstyle="border-radius:-5px;"></div>

Fixed: using a non-negative value

<divstyle="border-radius:5px;"></div>

Invalid: unrecognized keyword

<divstyle="border-radius: round;"></div>

Fixed: using a valid percentage for a circular shape

<divstyle="border-radius:50%;"></div>

Invalid: var() in inline style that the validator cannot resolve

<divstyle="border-radius:var(--my-radius);"></div>

Fixed: defining the custom property in a stylesheet

<!DOCTYPE html>

<htmllang="en">

<head>

<title>Border Radius Example</title>

<style>

:root{

--my-radius:8px;

}

.rounded{

border-radius:var(--my-radius);

}

</style>

</head>

<body>

<divclass="rounded">Rounded corners via custom property</div>

</body>

</html>

Note that even with the custom property properly defined, the W3C CSS validator may still flag var() usage because it performs static analysis without evaluating custom properties. This is a known limitation. If full validator compliance is important, use static values directly:

<divstyle="border-radius:8px;"></div>

Valid shorthand with elliptical radii

The / syntax lets you define horizontal and vertical radii separately:

<divstyle="border-radius:10px20px/5px15px;"></div>

This sets horizontal radii of 10px and 20px (alternating corners) and vertical radii of 5px and 15px, creating elliptical corners. Both sides of the / follow the same one-to-four value pattern.