Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set outline color with JavaScript?
To set outline color in JavaScript, use the outlineColor property. The outline appears outside an element's border and doesn't affect the element's dimensions or layout.
Syntax
element.style.outlineColor = "color";
Parameters
The outlineColor property accepts any valid CSS color value:
- Color names: "red", "blue", "green"
- Hex values: "#FF5733", "#000000"
- RGB values: "rgb(255, 87, 51)"
- HSL values: "hsl(9, 100%, 60%)"
Example: Setting Outline Color
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px solid red;
padding: 20px;
width: 200px;
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div id="box">
Demo Content
</div>
<button type="button" onclick="changeOutline()">Add Orange Outline</button>
<button type="button" onclick="removeOutline()">Remove Outline</button>
<script>
function changeOutline() {
const box = document.getElementById("box");
box.style.outline = "3px solid";
box.style.outlineColor = "#FF5733";
}
function removeOutline() {
const box = document.getElementById("box");
box.style.outline = "none";
}
</script>
</body>
</html>
Multiple Outline Colors
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
border: 1px solid #ccc;
padding: 15px;
margin: 10px;
width: 150px;
text-align: center;
}
</style>
</head>
<body>
<div class="demo-box" id="box1">Box 1</div>
<div class="demo-box" id="box2">Box 2</div>
<div class="demo-box" id="box3">Box 3</div>
<button onclick="setMultipleOutlines()">Set Different Outlines</button>
<script>
function setMultipleOutlines() {
// Set red outline
document.getElementById("box1").style.outline = "2px solid";
document.getElementById("box1").style.outlineColor = "red";
// Set blue outline using hex
document.getElementById("box2").style.outline = "3px dashed";
document.getElementById("box2").style.outlineColor = "#0066CC";
// Set green outline using RGB
document.getElementById("box3").style.outline = "4px dotted";
document.getElementById("box3").style.outlineColor = "rgb(34, 139, 34)";
}
</script>
</body>
</html>
Key Points
- Always set the
outlineproperty first to define width and style - Outlines don't take up space in the layout (unlike borders)
- Outlines follow the element's shape, not necessarily rectangular
- Use
outline: "none"to remove outlines completely
Conclusion
The outlineColor property provides an easy way to add visual emphasis to elements. Remember to set the outline width and style before applying the color for best results.
Updated on: 2026-03-15T23:18:59+05:30
579 Views
Advertisements