Change HTML Border Color in Java

To change an HTML border color in Java, load an HTMLDocument, select the target element, define border-style, border-width, and border-color with inline or internal CSS, and save the updated document.

The CSS border-color property sets the color of an element’s border, but it does not create a visible border by itself. Define a style such as solid and usually a width together with the color.

This article shows how to set one border color, assign a different color to each side, add reusable internal CSS, and change both outer and cell borders in an HTML table.

Change Border Color Using Inline CSS

Inline CSS applies declarations directly to one element. The following example loads border-color.html, selects its <h1> element, and creates a three-pixel solid border with the color #dc1e64.

Download border-color.html to the application’s working directory.
Load the file into an HTMLDocument.
Select the heading with querySelector().
Set its border style, width, and color through the style attribute.
Save the result as border-color-inline.html.

 1import com.aspose.html.HTMLDocument;
 2import com.aspose.html.dom.Element;
 3
 4String inputPath = "border-color.html";
 5String outputPath = "border-color-inline.html";
 6
 7HTMLDocument document = new HTMLDocument(inputPath);
 8Element heading = document.querySelector("h1");
 9
10if (heading != null) {
11    heading.setAttribute(
12            "style",
13            "border-style: solid; border-width: 3px;"
14                    + " border-color: #dc1e64; padding: 12px;"
15    );
16}
17
18document.save(outputPath);

The heading receives the same dark-pink color on all four sides. padding adds space between the text and the border but does not affect its color.

Calling setAttribute("style", value) replaces the complete inline style. Preserve any existing declarations that the element still needs, or update only the required properties through the CSS DOM.

Set Different Colors for Four Border Sides

The border-color shorthand accepts one to four values. With four values, the order is top, right, bottom, and left.

Number of values	Applied to
One	All four sides
Two	Top and bottom; right and left
Three	Top; right and left; bottom
Four	Top; right; bottom; left

The next example assigns red, blue, green, and gray to the four sides of the heading border.

Load the HTML file.
Select the <h1> element.
Define a visible border and pass four colors to border-color.
Save border-color-four-sides.html.

 1import com.aspose.html.HTMLDocument;
 2import com.aspose.html.dom.Element;
 3
 4String inputPath = "border-color.html";
 5String outputPath = "border-color-four-sides.html";
 6
 7HTMLDocument document = new HTMLDocument(inputPath);
 8Element heading = document.querySelector("h1");
 9
10if (heading != null) {
11    heading.setAttribute(
12            "style",
13            "border-style: solid; border-width: 4px;"
14                    + " border-color: #d32f2f #1976d2 #388e3c #757575;"
15                    + " padding: 12px;"
16    );
17}
18
19document.save(outputPath);

Use side-specific properties such as border-top-color or border-left-color when application code needs to change only one side.

Change Border Color Using Internal CSS

Internal CSS places reusable rules in a <style> element inside the document <head>. The following example styles every element with the notice class, so both notice sections in the sample file receive the same border.

Load the source document.
Create a <style> element with createElement().
Add a rule that defines the border for .notice elements.
Append the style element to the document <head>.
Save border-color-internal.html.

 1import com.aspose.html.HTMLDocument;
 2import com.aspose.html.dom.Element;
 3
 4String inputPath = "border-color.html";
 5String outputPath = "border-color-internal.html";
 6
 7HTMLDocument document = new HTMLDocument(inputPath);
 8Element style = document.createElement("style");
 9
10style.setTextContent(
11        ".notice {"
12                + " border: 2px solid rgb(220, 30, 100);"
13                + " padding: 12px;"
14                + " margin: 12px 0;"
15                + "}"
16);
17
18document.querySelector("head").appendChild(style);
19document.save(outputPath);

The shorthand declaration border: 2px solid rgb(220, 30, 100) sets width, style, and color in one rule. A normal inline declaration on a notice element can take precedence over this normal internal rule.

Change HTML Table Border Color

A table can have an outer border and separate borders on its header and data cells. Styling only the <table> element changes only the outer frame. To recolor the complete grid, target table, th, and td.

The following example adds a blue border to the table and every cell. It also uses border-collapse: collapse so adjacent cell borders are combined into a single grid line.

Load the HTML file containing the table.
Create a <style> element.
Add rules for the table, header cells, and data cells.
Append the stylesheet to <head> and save table-border-color.html.

 1import com.aspose.html.HTMLDocument;
 2import com.aspose.html.dom.Element;
 3
 4String inputPath = "border-color.html";
 5String outputPath = "table-border-color.html";
 6
 7HTMLDocument document = new HTMLDocument(inputPath);
 8Element style = document.createElement("style");
 9
10style.setTextContent(
11        "table { border-collapse: collapse; }"
12                + " table, th, td { border: 2px solid #0000ff; }"
13                + " th, td { padding: 8px; }"
14);
15
16document.querySelector("head").appendChild(style);
17document.save(outputPath);

The output contains a blue outer border and blue lines between all table cells.

Border Color Values and currentColor

border-color accepts named, HEX, RGB, HSL, and alpha-enabled CSS color values. When no explicit border color is specified, its initial value is currentColor, which uses the element’s computed color value. The border-style must still produce a visible border.

CSS declaration	Result
`border: 2px solid blue;`	Sets width, style, and color with shorthand
`border-color: #0000ff;`	Sets one color for every side
`border-color: red blue;`	Sets red on top and bottom and blue on right and left
`border-left-color: green;`	Changes only the left border color
`border-color: currentColor;`	Uses the computed foreground `color` value

Common Border Color Issues

Issue	Cause and fix
The border color is not visible	`border-color` does not create a border. Set `border-style` and an appropriate width.
Internal CSS does not change the border	An inline declaration or another rule may win in the cascade. Inspect the target element and matching selectors.
Only the table’s outer border changes	The rule targets only `table`. Include `th` and `td` when cell borders must also change.
Table borders appear doubled	Separate cell borders are being rendered. Set `border-collapse: collapse` on the table when a single grid is required.
Existing inline styles disappear	Replacing the `style` attribute removes its previous declarations. Preserve them or update individual CSS properties.
The four colors appear on unexpected sides	Use the clockwise order top, right, bottom, left.
Changes do not appear in the HTML file	Call `document.save()` and open the output file specified by the example.

FAQ

Why does border-color not create a visible border?

border-color controls only color. Define a visible border-style, such as solid, and usually a border-width as well.

How do I set the same border color on every side?

Use one value, for example border-color: #0000ff, or use the shorthand border: 2px solid #0000ff to set width, style, and color together.

How do I set different colors for each border side?

Supply four values in top, right, bottom, left order, or use properties such as border-top-color and border-right-color individually.

How do I change all borders in an HTML table?

Apply the border rule to table, th, and td. Add border-collapse: collapse to the table when adjacent borders should form a single grid.

What color is used when border-color is omitted?

The initial border color is currentColor, so it follows the element’s computed foreground color. A border style is still required for the border to be visible.

Can a border be transparent?

Yes. Use border-color: transparent for a fully transparent border or an alpha-enabled CSS color for partial transparency. The border still occupies space when its width and style are defined.

Change HTML Text Color in Java – set foreground text color with inline or internal CSS.
Change HTML Background Color in Java – style one element or the complete page background.
Edit HTML Documents in Java – create, select, and update HTML DOM nodes and styles.
Use CSS Selectors in Java – locate elements by tag, class, ID, attribute, or relationship.
HTML Table Generator – create table markup and preview its styling in a browser.
Change HTML Border Color in C# – use the corresponding Aspose.HTML for .NET workflow.
Change HTML Border Color in Python – use Aspose.HTML for Python via .NET to style element and table borders.

How to Change Background Color FAQ