Outline

An outline is drawn around an element's margin, outside the border. Unlike borders, outlines don't affect layout. They're commonly used for focus states in interactive elements.

Outline Syntax

CSS

/* Outline shorthand */
.element {
  outline: 2px solid blue;
}

/* Individual properties */
.element {
  outline-width: 2px;
  outline-style: solid;
  outline-color: blue;
}

/* Outline offset */
.element {
  outline: 2px solid blue;
  outline-offset: 4px;
  /* Space between outline and border */
}

Focus States

CSS

/* Input focus with outline */
input:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Button focus */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Remove browser default outline */
button {
  outline: none;
}

button:focus {
  /* Custom outline instead */
  outline: 2px solid blue;
}

Note

Outlines are drawn outside borders and don't affect layout. They're useful for focus states. Always provide visible focus indicators for accessibility.

Visibility and display: [visibility vs display:none](/css/visibility-display-none).