Change HTML Border Color in C#

To change HTML border color in C#, load the document with HTMLDocument, find the target element, set both border-style and border-color with inline or internal CSS, and save the updated file.

This article shows several ways to set or change border color in HTML files using Aspose.HTML for .NET. The examples cover one element, four-side border colors, internal CSS, and HTML table borders.

The CSS border-color property accepts named colors, HEX, RGB, RGBA, HSL, and HSLA values. It is important to define border-style as well, because border-color only becomes visible when a border style is applied. For more details, see HTML Color Codes and the Border Color section of the color tutorial.

Change Border Color Using Inline CSS

You can set or change the border color using inline style attribute – inline CSS. The border-color property will only work when the border-style property is defined first. This property will not create a visible border by itself. If border-color is not set, the border color inherits the element’s color. To change border color for HTML element using Aspose.HTML API you should follow a few steps:

1. Load an existing HTML file.
2. Create an instance of an HTML document.
3. Determine which element you want to change the border color for and find this element to set a style attribute for it. Use the GetElementsByTagName(name) method of the Element class that returns HTML element with a given tag name.
4. Set the style attribute with border-style and border-color properties: use the Style property of the HTMLElement class.
5. Save the modified HTML document.

You can set or change border color for various HTML elements such as <p>, <h1>…<h6>, <div> or <table>. The following C# example shows the border color change for the <h1> element:

// Сhange border color for <h1> element using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-border-color.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "file.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Find the h1 element to set a style attribute
HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Set the style attribute properties
header.Style.Color = "#8B0000";
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "rgb(220,30,100)";

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

It should be noted that in this C# example, not only the border color for the <h1> element was changed, but also the text color for this element because the color property was added.

Change Color for Four Sides of the Border

The border-color property sets the color of the four borders of an element. If the border-color property has a single value, then the entire border will be painted with this color. But you can set different color values for the top, right, bottom, and left borders. For example, if you set the border-color: red blue green gray, the top border is red, the right border is blue, the bottom border is green and the left border is grey.

// Set different colors for all four borders of HTML element using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-four-border-color.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "change-border-color.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Find the h1 element to set a style attribute
HTMLElement header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Set the style attribute properties
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "red blue green gray";

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

The figure illustrates the results of changing border color for the <h1> element using inline CSS: a) changed color for entire border; b) changed color for each of the four sides of the border.

Change Border Color Using Internal CSS

The same border colorization result can be achieved using internal CSS, as shown in the following HTML code example:

<head>
<style>
	h1 {
	border-style: solid;
	border-color: rgb(220,30,100);
	}
</style>
</head>

Note: Keep in mind, that the usage of a style attribute overrides any style set in the HTML <style> tag or external style sheet.

The next C# example demonstrates how to realize internal CSS to change border color. Take a few steps:

1. Load an existing HTML file.
2. Create an instance of an HTML document.
3. Create a <style> element and assign the border-style and border-color values for <h1> element.
4. Find the <head> element in your document and add the <style> element into it.
5. Save the modified HTML document.

// Add internal CSS to style HTML in C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-border-color-internal-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "file.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a style element and assign the color border-style and border-color values for h1 element
Element style = document.CreateElement("style");
style.TextContent = "h1 {color:DarkRed; border-style:solid; border-color:rgb(220,30,100) }";

// Find the document head element and append style element to the head
Element head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

The C# code execution that we have given above will result in the <style> element appearing in the <head> of the output file, which is illustrated by the following HTML code:

<head>
<style>
	h1 { 
		color: darkred;
		border-top-style: solid;
		border-right-style: solid;
		border-bottom-style: solid;
		border-left-style: solid;
		border-top-color: rgb(220, 30, 100);
		border-right-color: rgb(220, 30, 100);
		border-bottom-color: rgb(220, 30, 100);
		border-left-color: rgb(220, 30, 100); }
</style>
</head>

The result is similar to the one shown in Figure (a) above.

Change Table Border Color

If you want to change the table border color, you can use inline or internal CSS.

You can apply the style attribute with the HTML <table> element. Keep in mind, that the usage of a style attribute overrides any style set in the HTML <style> tag or external style sheet. To change the table border color using inline CSS style attribute you can use the QuerySelector() method to navigate DOM and find the <table> element. Then set the style attribute with the required properties for the <table> element:

Change HTML Table Border Color Using Inline CSS in C#

// Change table border color using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-table-border-color-inline-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "table.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a CSS Selector that selects the first table element
Element element = document.QuerySelector("table");

// Set style attribute with properties for the selected element
element.SetAttribute("style", "border: 2px #0000ff solid");

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Equivalent JavaScript

<script>
	// Create a CSS Selector that selects the first table element
    var element = document.querySelector("table");

    // Set style attribute with properties for the selected element
    element.setAttribute("style", "border: 2px #0000ff solid");
</script>

The same table border colorization result can be achieved using internal CSS, as shown in the following C# code example 2:

Change HTML Table Border Color Using Internal CSS in C#

// Change HTML table border color using C#

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-table-border-color-internal-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "table.html");

// Create an instance of an HTML document
HTMLDocument document = new HTMLDocument(documentPath);

// Create a style element and assign the color border-style and border-color values for table element
Element style = document.CreateElement("style");
style.TextContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";

// Find the document head element and append style element to the head
Element head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Equivalent JavaScript

<script>
	// Create a style element and assign the border-style and border-color values for table element
	var style = document.createElement("style");
	style.textContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";

	// Find the document's <head> element and add a <style> element to it
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(style);
</script>

The figure shows the HTML table table.html after changing the border color from red to blue:

Common Border Color Issues

Issue	Why it happens	What to check
Border color is not visible	border-color does not create a border by itself.	Set border-style and, when needed, border width together with border-color.
Internal CSS does not change the border	Inline style attributes override rules in <style> and external CSS.	Remove or update the inline style on the target element.
Table border changes only the outer border	A table can have borders on the table, rows, and cells.	Apply CSS to table, th, or td depending on which border should change.

FAQ

Why does border-color not change anything?

The element may not have a visible border. Set border-style, such as solid, before or together with border-color.

Can I set different colors for each border side?

Yes. Use a four-value border-color declaration or set side-specific properties such as border-top-color, border-right-color, border-bottom-color, and border-left-color.

How do I change table border color?

Use QuerySelector() to find the table and set inline CSS, or add an internal CSS rule for table, th, and td elements depending on the required result.

Related Articles

• Change HTML Text Color in C# – set the CSS color property for text elements.
• Change HTML Background Color in C# – update element and page background colors.
• Add Image to HTML in C# – insert image elements and CSS background images.
• HTML Color Codes – review supported CSS color formats.
• HTML Table Generator – create table markup and preview table styling in a browser.
• Aspose.HTML for .NET examples on GitHub – download complete C# examples and data files.