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 offset an outline and draw it beyond the border edge with JavaScript?
To offset an outline in JavaScript, use the outlineOffset property. This CSS property allows you to draw the outline beyond the border edge, creating space between the element's border and its outline.
Syntax
element.style.outlineOffset = "value";
The value can be specified in pixels (px), ems (em), or other CSS length units. Positive values move the outline away from the border, while negative values move it inward.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: orange;
border: 3px solid red;
margin: 20px;
padding: 15px;
}
</style>
</head>
<body>
<p>Click below to add Outline Offset.</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="addOutline()">Set Outline Offset</button>
<button type="button" onclick="removeOutline()">Remove Outline</button>
<br>
<script>
function addOutline() {
const element = document.getElementById("box");
element.style.outline = "3px solid #5F5F5F";
element.style.outlineOffset = "10px";
}
function removeOutline() {
const element = document.getElementById("box");
element.style.outline = "none";
element.style.outlineOffset = "0";
}
</script>
</body>
</html>
Different Offset Values
You can experiment with various offset values:
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid navy;
margin: 30px;
display: inline-block;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h3>Different Outline Offset Examples</h3>
<div class="demo-box" id="box1">5px offset</div>
<div class="demo-box" id="box2">15px offset</div>
<div class="demo-box" id="box3">-5px offset</div>
<br>
<button onclick="showOffsets()">Apply Offsets</button>
<script>
function showOffsets() {
// 5px positive offset
document.getElementById("box1").style.outline = "2px solid red";
document.getElementById("box1").style.outlineOffset = "5px";
// 15px positive offset
document.getElementById("box2").style.outline = "2px solid green";
document.getElementById("box2").style.outlineOffset = "15px";
// -5px negative offset (inside border)
document.getElementById("box3").style.outline = "2px solid purple";
document.getElementById("box3").style.outlineOffset = "-5px";
}
</script>
</body>
</html>
Key Points
- Positive values: Move the outline away from the border edge
- Negative values: Move the outline inside the border area
- Default value: 0 (outline touches the border)
- Units: Accepts px, em, rem, and other CSS length units
Conclusion
The outlineOffset property provides precise control over outline positioning relative to an element's border. Use positive values to create space between the border and outline, or negative values to draw the outline inside the element.
Updated on: 2026-03-15T23:18:59+05:30
255 Views
Advertisements