CSS Outline

  • An outline is a line that is drawn around elements, outside the borders.
  • Diagram of outline:
  • E.g.:

<html>

<head>

<style>

p {

  border: 1px solid black;

  outline: yellow solid 10px;  

  text-align: center;

}

</style>

</head>

<body>

<p>Outline demo</p>

</body>

</html>

  • Output:
  • Outline offset: This is an outline property which is used to add space between outline & border of an element. This space is transparent.
  • Outline offset demo:

<html>

<head>

<style>

p {

  border: 1px solid black;

  outline: yellow solid 10px;  

  text-align: center;

  outline-offset: 15px;

  margin:30px;

}

</style>

</head>

<body>

<p>Outline demo</p>

</body>

</html>

  • Output:

Leave a comment