CSS Outline

The outline property in CSS is used to draw a line around an element, outside its border, to make it stand out. Unlike borders, outlines do not take up space and are not part of the element’s box model.

 

This is a box with red border and a skyblue outline with a width of 8px.

 

Syntax

selector {
  outline: [outline-width] [outline-style] [outline-color];
}

Try It Now

  • outline-width: Specifies the thickness of the outline (e.g., thin, medium, thick, or a specific value like 2px).
  • outline-style: Defines the style of the outline (e.g., solid, dotted, dashed, none).
  • outline-color: Sets the color of the outline (e.g., red, #ff0000, rgba(255, 0, 0, 0.5)).

Example

Basic Outline

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Outline</title>
  <style>
    .box {
      width: 150px;
      height: 100px;
      background-color: lightblue;
      outline: 2px solid red; /* Outline around the element */
    }
  </style>
</head>
<body>
  <div class="box">This is a box</div>
</body>
</html>

Try It Now

Individual Outline Properties

1. outline-width

Specifies the thickness of the outline.

.box {
  outline-width: 5px;
}

Try It Now

2. outline-style

Defines the style of the outline.

.box {
  outline-style: dashed; /* Options: solid, dotted, dashed, double, groove, ridge, inset, outset, none */
}

Try It Now

Example:

p.solid {outline-style: solid;}
p.solid {outline-style: solid;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
p.none {outline-style: none;}

Try It Now

Result:  

Solid outline.

Dotted outline.

Dashed outline.

Double outline.

Groove outline.

Ridge outline.

Inset outline.

Outset outline.

None outline.

3. outline-color

Sets the color of the outline.

.box {
  outline-color: blue; /* Can use named colors, HEX, RGB, or HSL */
}

Try It Now

Shorthand Example

.box {
  outline: 3px dotted green;
}

Try It Now

Focus and Accessibility

The outline property is commonly used to indicate focus on interactive elements like buttons, links, or form fields, which improves accessibility.

Focus Outline Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Focus Outline</title>
  <style>
    button {
      padding: 10px 20px;
      font-size: 16px;
      outline: none; /* Remove default outline */
    }

    button:focus {
      outline: 3px solid blue; /* Add custom outline on focus */
    }
  </style>
</head>
<body>
  <button>Click Me</button>
</body>
</html>

Try It Now

Outline Offset

The outline-offset property adds space between the element and its outline.

Example

.box {
  outline: 2px solid red;
  outline-offset: 10px; /* Space between element and outline */
}

Try It Now

Differences Between Outline and Border

Feature Outline Border
Position Outside the element’s border Part of the element’s box model
Space Does not take up space Takes up space
Shape Cannot be rounded directly Can be rounded with border-radius
Customizable Limited styling options More flexible with styles

Browser Support

The outline property is supported by all major browsers.

Browser Support
Chrome Yes
Firefox Yes
Edge Yes
Safari Yes
Internet Explorer Yes

Best Practices

  1. Accessibility:
    • Avoid removing outlines on focus for interactive elements unless providing a visually clear alternative.
  2. Design:
    • Use outline-offset for better spacing and visual appeal.
  3. Testing:
    • Test your outlines on different devices and screen sizes to ensure clarity.

Complete Example

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Outline Example</title>
<style>
    * {
        box-sizing: border-box;         /* Ensures padding and border are included in total width and height */
        margin: 0;                      /* Removes default margin for consistency */
        padding: 0;                     /* Removes default padding for consistency */
    }

    body {
        font-family: Arial, sans-serif; /* Standardizes font for a cleaner look */
        background-color: #f0f0f0;      /* Subtle background color for contrast */
        display: flex;                  /* Centers content */
        align-items: center;            /* Centers content vertically */
        justify-content: center;        /* Centers content horizontally */
        height: 100vh;                  /* Full viewport height */
    }

    .container {
        text-align: center;             /* Centers text inside the container */
        background-color: #fff;         /* White background for the container */
        padding: 20px;                  /* Adds padding inside the container */
        border-radius: 10px;            /* Smooth corners for a modern look */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
    }

    .box {
        width: 150px;
        height: 100px;
        background-color: lightblue;
        outline: 3px solid red;
        outline-offset: 10px;
        margin-bottom: 20px;           /* Adds spacing below the box */
    }

    button {
        padding: 10px 20px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;            /* Smooth corners for buttons */
        background-color: #fff;
        cursor: pointer;               /* Pointer cursor on hover for buttons */
        transition: background-color 0.3s;  /* Smooth background transition */
    }

    button:hover {
        background-color: #f0f0f0;     /* Subtle hover effect for buttons */
    }

    button:focus {
        outline: 2px dashed green;
    }
</style>
</head>

<body>

<div class="container">
    <div class="box">Box with Outline</div>
    <button>Focusable Button</button>
</div>

</body>
</html>

Try It Now

This example demonstrates the use of outline, outline-offset, and focus outlines for accessibility. Experiment with these properties to enhance your designs!