CSS outline Property

What You’ll Learn

The outline property draws a highlight around an element without changing its size or pushing other content. It is especially useful for focus states and accessibility.

Introduction

The outline property in CSS is used to create an outline around elements. This outline is similar to a border but has some key differences, such as not affecting the layout or taking up space.

It’s often used to highlight elements, such as when a user interacts with form controls or navigates a page using the keyboard.

Definition and Usage

Use outline when you want a visible ring around an element without changing its width, height, or the position of nearby content.

For decorative boxes that should affect layout, use border instead. For keyboard focus indicators, outline is usually the better choice.

📝 Syntax

The outline property is a shorthand property for setting the following individual outline properties: outline-color, outline-style, and outline-width.

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

Basic Example

button {
  outline: 3px solid red;
}

Syntax Rules

• You can omit parts of the shorthand; omitted values reset to their defaults.
• outline-style: none hides the outline even if width or color is set.
• Outlines are drawn outside the border edge and do not affect box dimensions.
• Use longhand properties when you need to change only one part of the outline.

🎯 Default Value

The default value of the outline property is equivalent to medium none currentColor. This means that if no values are specified, the outline will not be visible.

Browsers may show a default focus outline on interactive elements until you style focus states yourself.

💎 Property Values

Examples Gallery

From shorthand button outlines to longhand input styles and accessible focus rings.

<style>
  button {
    outline: 3px solid red;
  }
</style>

<button>Click Me!</button>

<style>
  input[type="text"] {
    outline-width: 2px;
    outline-style: dashed;
    outline-color: blue;
  }
</style>

<input type="text" placeholder="Type here">

a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

.with-border {
  border: 3px solid #9333ea;
}

.with-outline {
  outline: 3px solid #9333ea;
}

Longhand properties and outline-offset

Split the shorthand into outline-width, outline-style, and outline-color when you need finer control. Use outline-offset to push the outline farther away from the element.

.card:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #2563eb;
  outline-offset: 4px;
}

♿ Accessibility

• Keep visible focus — Do not remove focus outlines without providing a clear replacement.
• Use :focus-visible — Show strong outlines for keyboard users when possible.
• Ensure contrast — Focus rings should stand out against the background.
• Prefer outline over border for focus — Outlines avoid layout jumps when focus changes.

💡 Best Practices