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.

What is an Outline?
Difference Between Border and Outline
CSS Outline Properties
- Outline Style
- Outline Width
- Outline Color
- Outline Offset
- Outline Shorthand
Practical Examples
- Example 1: Basic Outline
- Example 2: Customizing Outlines
- Example 3: Outline Offset
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.

Property	Border	Outline
Affects Size	Yes	No
Position	Inside	Outside
Affects Layout	Yes	No

Property

Border

Outline

Affects Size

Yes

Position

Inside

Outside

Affects Layout

Yes

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.

PreviousCSS Box Model NextCSS Cursors

Last updated 3 months ago

Table of Contents

1. What is an Outline?

2. Difference Between Border and Outline

3. CSS Outline Properties

a. Outline Style

b. Outline Width

c. Outline Color

d. Outline Offset

e. Outline Shorthand

4. Practical Examples

Example 1: Basic Outline

Example 2: Customizing Outlines

Example 3: Outline Offset

5. Conclusion