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 all outline properties in a single declaration with JavaScript?
To set all outline properties in one declaration, use the outline property. It sets the following properties: outline-width, outline-style, and outline-color.
Syntax
element.style.outline = "width style color";
Parameters
The outline property accepts three values in any order:
- width - thickness (thin, medium, thick, or length value like 2px)
- style - line style (solid, dashed, dotted, double, groove, ridge, inset, outset)
- color - outline color (color name, hex, rgb, rgba)
Example
You can try to run the following code to learn how to work with outline properties:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div id="box">This is a div.</div>
<br>
<button type="button" onclick="display()">Click to set Outline</button>
<script>
function display() {
document.getElementById("box").style.outline = "5px solid red";
}
</script>
</body>
</html>
Multiple Outline Styles Example
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
width: 150px;
height: 100px;
margin: 20px;
padding: 15px;
border: 1px solid #ccc;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div class="demo-box" id="box1">Solid Outline</div>
<div class="demo-box" id="box2">Dashed Outline</div>
<div class="demo-box" id="box3">Dotted Outline</div>
<br><br>
<button onclick="setOutlines()">Apply Different Outlines</button>
<script>
function setOutlines() {
document.getElementById("box1").style.outline = "3px solid blue";
document.getElementById("box2").style.outline = "4px dashed green";
document.getElementById("box3").style.outline = "2px dotted orange";
}
</script>
</body>
</html>
Key Points
- The outline property is a shorthand for outline-width, outline-style, and outline-color
- Outlines don't take up space and appear outside the border
- Values can be specified in any order
- If any value is omitted, the default value is used
Conclusion
The outline property provides a convenient way to set all outline properties at once. Use it to create visual focus indicators or highlight elements without affecting layout.
Updated on: 2026-03-15T23:18:59+05:30
189 Views
Advertisements