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 the width of the outline around an element with JavaScript?
To set the outline width, use the outlineWidth property. The outline appears outside the border and doesn't affect the element's layout. You can set it using pixel values, keywords, or other CSS units.
Syntax
element.style.outlineWidth = value;
Parameters
The outlineWidth property accepts the following values:
- Pixel values: "1px", "5px", "10px"
- Keywords: "thin", "medium", "thick"
- Other units: "1em", "2rem", "0.5cm"
Example
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: orange;
border: 3px solid red;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<p>Click below to add Outline Width.</p>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<button type="button" onclick="setOutlineWidth()">Set Outline Width</button>
<button type="button" onclick="removeOutline()">Remove Outline</button>
<br>
<script>
function setOutlineWidth() {
const element = document.getElementById("box");
element.style.outlineColor = "#5F5F5F";
element.style.outlineStyle = "solid";
element.style.outlineWidth = "7px";
}
function removeOutline() {
document.getElementById("box").style.outline = "none";
}
</script>
</body>
</html>
Different Outline Width Values
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
width: 200px;
height: 80px;
background-color: lightblue;
margin: 15px;
padding: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="demo-box" id="box1">Thin Outline</div>
<div class="demo-box" id="box2">Medium Outline</div>
<div class="demo-box" id="box3">Thick Outline</div>
<div class="demo-box" id="box4">Custom 10px</div>
<script>
// Set different outline widths
document.getElementById("box1").style.outline = "thin solid red";
document.getElementById("box2").style.outline = "medium solid green";
document.getElementById("box3").style.outline = "thick solid blue";
document.getElementById("box4").style.outline = "10px solid purple";
</script>
</body>
</html>
Key Points
- Outline width must be used with
outlineStyleto be visible - Outlines don't take up space and don't affect layout
- Use pixel values for precise control over outline thickness
- Keywords like "thin", "medium", "thick" provide browser-default widths
Conclusion
Use the outlineWidth property to control outline thickness around elements. Remember to set both outlineStyle and outlineWidth for the outline to appear properly.
Updated on: 2026-03-15T23:18:59+05:30
197 Views
Advertisements