Using Outlines
The outlines are outside of the border box.
The border is part of the page, and causes to re-layout the page. The outline is not part of the page, and so does not cause to re-layout the page.
The outline Properties are
Property | Description | Values |
---|---|---|
outline-color | color | <color> |
outline-offset | offset | <length> |
outline-style | style | same with border-style property. |
outline-width | width . | thin | medium | thick | <length> |
outline | shorthand property sets the outline in a single declaration. | <color> <style> <width> |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#myID {
outline: thick solid red;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p id="myID">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<button>Outline Off</button>
<button>Outline On</button>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elem = document.getElementById("myID");
if (e.target.innerHTML == "Outline Off") {
elem.style.outline = "none";
} else {
elem.style.outlineColor = "blue";
elem.style.outlineStyle = "solid";
elem.style.outlineWidth = "thin";
}
};
}
</script>
</body>
</html>