HTML Guide for border

The border property in your CSS has too many values or uses incorrect values.

According to the CSS specification, the shorthand border property accepts the following, in any order: border-width, border-style, and border-color, but each should occur at most once and be a valid value.

Common mistakes:

• Adding extra values, such as two widths or two colors.
• Using an invalid border-style.
• Misspelling keywords.

Correct syntax:

selector {
  border: border-width border-style border-color;
}

• border-width: e.g., 1px, thin, 0
• border-style: e.g., solid, dashed, none
• border-color: e.g., #ff0, red, rgb(255,0,0)

Valid examples:

/* Valid shorthand: width, style, color */
div {
  border: 2px solid black;
}

p {
  border: thin dashed #00f;
}

section {
  border: 0 none;
}

Make sure your border property contains at most one valid value each for width, style, and color, and not more than three total.

This W3C Validator issue indicates that the value assigned to the CSS border property is invalid. The border property in CSS is used to specify the width, style, and color of an element’s border, and these values must be appropriately defined.

To resolve this issue, make sure you define the border property using valid values for border width, border style, and border color. Below is the correct syntax for setting a border:

selector {
  border: 1px solid black; /* width, style, color */
}

If you inadvertently set the border property to an incorrect or undefined value, such as undefined, it will trigger this validation issue.

Incorrect Example:

<div style="border: undefined;"></div> <!-- This will cause a validation error -->

Correct Example:

To correct this, replace undefined with a valid CSS border definition. For example:

<div style="border: 1px solid black;"></div>

Breakdown:

• 1px is the border width.
• solid is the border style.
• black is the border color.

More Examples:

Here are a few more valid examples with different border styles:

• Dotted border:

  <div style="border: 2px dotted red;"></div>

• Dashed border:

  <div style="border: 3px dashed blue;"></div>

• Double border:

  <div style="border: 4px double green;"></div>

Additionally, you can define border properties separately:

selector {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Summary:

Ensure your border property has valid width, style, and color values. Avoid using placeholders like undefined in your CSS properties. This will resolve the W3C Validator issue and render your border as expected in your HTML document.

<img> tags no longer accept a border attribute. This can be defined using CSS instead, for example:

<img src="..." alt="..." style="border:0;" />