CSS Outline

Next ❯CSS Margin

Used to define the Outline effects on element, Just similar to border

  • It's used to provide a virtual-outline above border
    virtual-outline because, the space covered by an outline will not included with an element

The black box is my border & red box is my outline

  • turned_in_notOutline Properties
    • outline-style
    • outline-width
    • outline-color
    • outline-offset
    • outline

outline-offset - Used to add space area length between an outline and the border of an element, and by default border-width is 0


Checkout the Outline
h1 {
  outline-style: dotted;
  outline-width: 5px;
  outline-color: black;
  outline-offset: 1px;
}
outlinesubject
outlineclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  outline-style: dotted;
  outline-width: 5px;
  outline-color: black;
  outline-offset: 1px;
  text-align:center;
  background-color:#faebd7;
}
</style>
</head>
<body>
<h1>Checkout the Outline</h1>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    outline-style:
    outline-width:
    outline-offset:
    outline-color:

Checkout the Outline
h1 {
/*outline: width style color */
  outline: 4px dashed cadetblue;
}
outline (All-In-One)subject
outline (All-In-One)close
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*outline: width style color */
  outline: 4px dashed cadetblue;
  text-align:center;
}
</style>
</head>
<body>
  <h1>Checkout the Outline</h1>
</body>
</html>

  • CSS Margin
❮ Prev CSS Border
Next ❯CSS Margin
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯