CSS Outline

By Codes With Pankaj


The CSS Outline is a powerful tool for highlighting elements on a webpage. Unlike borders, outlines do not affect the size of an element or its position in the document. This tutorial will explore the CSS Outline properties in detail, explaining how to use them effectively in your web design.

Table of Contents

  1. What is an Outline?

  2. Difference Between Border and Outline

  3. CSS Outline Properties

    • Outline Style

    • Outline Width

    • Outline Color

    • Outline Offset

    • Outline Shorthand

  4. Practical Examples

    • Example 1: Basic Outline

    • Example 2: Customizing Outlines

    • Example 3: Outline Offset

  5. Conclusion


1. What is an Outline?

An outline is a line drawn around an element, outside the border, to make the element stand out. Outlines are often used for highlighting or drawing attention to specific parts of a webpage. Unlike borders, outlines do not affect the size or position of an element.

Key Characteristics:

  • Outlines are drawn outside the element's border.

  • Outlines do not take up space and do not affect the element's box model.

  • Outlines can be customized with different styles, widths, and colors.


2. Difference Between Border and Outline

Although borders and outlines might seem similar, they have some key differences:

  • Border:

    • A border is part of the element's box model. It occupies space and affects the element's size.

    • Borders are drawn inside the element's box, around the padding.

  • Outline:

    • An outline is drawn outside the border and does not affect the element's size.

    • Outlines do not affect the element's layout or positioning in the document.


3. CSS Outline Properties

CSS provides several properties to customize outlines. Let's explore them in detail.

a. Outline Style

The outline-style property sets the style of the outline. It can take various values similar to the border-style property.

Example Values:

  • solid

  • dotted

  • dashed

  • double

  • groove

  • ridge

  • inset

  • outset

  • none (default)

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline Style Example - codeswithpankaj</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightyellow;
      outline-style: dashed;
    }
  </style>
</head>
<body>

<div class="box">
  This box has a dashed outline.
</div>

</body>
</html>

Explanation:

  • The outline is dashed, surrounding the element without affecting its size or layout.

b. Outline Width

The outline-width property sets the thickness of the outline. You can specify the width in various units, such as pixels (px), ems (em), or keywords (thin, medium, thick).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline Width Example - codeswithpankaj</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightyellow;
      outline-style: solid;
      outline-width: 5px;
    }
  </style>
</head>
<body>

<div class="box">
  This box has a 5px solid outline.
</div>

</body>
</html>

Explanation:

  • The outline is 5px thick, giving it a bold appearance without affecting the element's dimensions.

c. Outline Color

The outline-color property sets the color of the outline. You can use any valid color value, such as color names, HEX, RGB, RGBA, HSL, or HSLA.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline Color Example - codeswithpankaj</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightyellow;
      outline-style: solid;
      outline-width: 5px;
      outline-color: red;
    }
  </style>
</head>
<body>

<div class="box">
  This box has a red outline.
</div>

</body>
</html>

Explanation:

  • The outline is red, making the element more prominent without affecting the background color or size.

d. Outline Offset

The outline-offset property sets the distance between the outline and the element's border. Positive values push the outline further away from the element, while negative values pull it closer.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline Offset Example - codeswithpankaj</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightyellow;
      outline-style: solid;
      outline-width: 5px;
      outline-color: blue;
      outline-offset: 10px;
    }
  </style>
</head>
<body>

<div class="box">
  This box has a 10px offset outline.
</div>

</body>
</html>

Explanation:

  • The outline is offset by 10px, creating a gap between the element's border and the outline.

e. Outline Shorthand

The outline shorthand property allows you to set the outline style, width, and color in a single declaration.

Syntax:

outline: <outline-width> <outline-style> <outline-color>;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline Shorthand Example - codeswithpankaj</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightyellow;
      outline: 3px dashed green;
    }
  </style>
</head>
<body>

<div class="box">
  This box uses the outline shorthand property.
</div>

</body>
</html>

Explanation:

  • The outline is set using the shorthand property, defining the width, style, and color all in one line.


4. Practical Examples

Let's look at some practical examples to see how outlines can be applied in different scenarios.

Example 1: Basic Outline

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Outline Example - codeswithpankaj</title>
  <style>
    .box {
      width: 250px;
      height: 150px;
      background-color: lightgreen;
      outline: 2px solid black;
    }
  </style>
</head>
<body>

<div class="box">
  This box has a basic solid outline.
</div>

</body>
</html>

Explanation:

  • A simple outline is applied to the box, making it stand out without altering its size or layout.

Example 2: Customizing Outlines

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customizing Outlines Example - codeswithpankaj</title>
  <style>
    .box {
      width: 250px;
      height: 150px;
      background-color: lightblue;
      outline-style: double;
      outline-width: 4px;
      outline

-color: orange;
    }
  </style>
</head>
<body>

<div class="box">
  This box has a customized double outline.
</div>

</body>
</html>

Explanation:

  • The outline is customized with a double style, 4px width, and orange color, creating a distinct visual effect.

Example 3: Outline Offset

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline Offset Example - codeswithpankaj</title>
  <style>
    .box {
      width: 250px;
      height: 150px;
      background-color: lightcoral;
      outline: 3px solid purple;
      outline-offset: 15px;
    }
  </style>
</head>
<body>

<div class="box">
  This box has an outline offset by 15px.
</div>

</body>
</html>

Explanation:

  • The outline is offset by 15px, creating a noticeable gap between the element's border and the outline.


5. Conclusion

The CSS Outline is a versatile tool for highlighting elements on a webpage without affecting their size or layout. By understanding and utilizing the various outline properties, you can create visually appealing designs that draw attention to specific elements.

  • Outline Style: Defines the style of the outline (solid, dashed, etc.).

  • Outline Width: Sets the thickness of the outline.

  • Outline Color: Specifies the color of the outline.

  • Outline Offset: Controls the distance between the outline and the border.

  • Outline Shorthand: A convenient way to set all outline properties in one declaration.

Using these properties, you can enhance the visual impact of your web pages, making elements stand out in a controlled and aesthetically pleasing manner.


For more tutorials and insights, visit Codes With Pankaj.

Last updated