CSS Properties: How to specify an outline 10px outside the border edge

Last update on February 23 2024 13:04:52 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to specify an outline 10px outside the border edge</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
 div { /* Styles all div elements */
  margin: 20px; /* Sets the margin around the div */
  width: 150px; /* Sets the width of the div */
  padding: 10px; /* Sets the padding inside the div */
  height: 70px; /* Sets the height of the div */
  border: 2px solid #660033; /* Sets a solid border around the div with a dark red color */
  outline: 2px solid #CCCC33; /* Sets a solid outline around the div with a light yellow color */
  outline-offset: 10px; /* Specifies the distance by which the outline should be offset from the border */
} 
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<h2>w3resource Tutorial</h2><!-- Displays a level 2 heading -->
<div>This division has an outline border 10px outside the border edge.</div><!-- Displays a div element with a text content -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to specify an outline that is 10px outside the border edge of a div element using CSS.
CSS comments are added to explain each section of the code.
The div element is styled with:

Margin of 20px around the div.
Width of 150px.
Padding of 10px inside the div.
Height of 70px.
Border of 2px solid with a dark red color (#660033).
Outline of 2px solid with a light yellow color (#CCCC33).
Outline offset of 10px, which specifies the distance by which the outline should be offset from the border edge.

Live Demo:

See the Pen outline-offset-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page