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

PropertyDescriptionValues
outline-colorcolor <color>
outline-offsetoffset <length>
outline-stylestylesame with border-style property.
outline-widthwidth . thin | medium | thick | <length>
outlineshorthand 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>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Related: